現在時刻

1000 ミリ秒単位に現在時刻を表示します。
現在時刻: 9:34:42
スタート  ストップ

次のリンクをクリックすると "ngp_time.html" が呼び出されます。
現在時刻を表示

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_time.html" です。
    <!doctype html>
    <html ng-app="myApp">
    
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('MyController',
      function($scope, $interval)
      { $scope.message = '現在時刻を表示';
        var t;
        // スタートボタンで1000ミリ秒単位に処理を実行
        $scope.onStart = function()
        { t = $interval(function()
              { $scope.message = '現在時刻:' + (new Date()).toLocaleTimeString();
              }, 1000);
        }
        // ストップボタンでタイマー処理を中止
        $scope.onStop = function()
        { $interval.cancel(t);
        };
      });
    </script>
    </head>
    
    <body ng-controller="MyController">
    <div>{{message}}</div>
    <button ng-click="onStart()">スタート</button>
    <button ng-click="onStop()">ストップ</button>
    </body>
    
    </html>
    
  2. myApp モジュールを作成して myController コントローラーを登録します。
    var app = angular.module('myApp', []);
    app.controller('MyController',
      function($scope, $interval)
      { $scope.message = '現在時刻を表示';
        var t;
    
  3. 時刻の表示を開始する onStart 関数です。
        $scope.onStart = function()
        { t = $interval(function()
              { $scope.message = '現在時刻:' + (new Date()).toLocaleTimeString();
              }, 1000);
        }
    
  4. 時刻の表示を停止する onStop 関数です。
        $scope.onStop = function()
        { $interval.cancel(t);
        };
    
  5. div で MyController を定義します。
    {{message}} に現在時刻を表示します。
    スタートボタンのクリックで、現在時刻の表示を開始します。
    ストップボタンで時刻の更新を停止します。
    <body ng-controller="MyController">
    <div>{{message}}</div>
    <button ng-click="onStart()">スタート</button>
    <button ng-click="onStop()">ストップ</button>
    </body>
    
  6. AngularJS を使用せずに、同じプログラムを作成してみました。
    Time こちらの方が解りやすくて簡単かも知れません。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)