如何在 AngularJS 和 HTML 中制作一个滴答作响的时钟（时间）答案

【问题标题】：How to make a ticking clock (time) in AngularJS and HTML如何在 AngularJS 和 HTML 中制作一个滴答作响的时钟（时间）
【发布时间】：2014-06-16 11:41:36
【问题描述】：

我是 AngularJS/html 初学者，一直在尝试寻找代码 sn-p 来为 Web 应用程序制作时钟/时间项。

网络搜索并没有像我所期望的那样容易地提供直接的结果，因为我认为它们是微不足道的，所以我想我会发布这个问题以获得一些答案，也让其他人更容易找到它。

我已经发布了我的解决方案，但想在选择答案之前看看是否有更好的解决方案！

【问题讨论】：

标签： html angularjs time clock

【解决方案1】：

最好的方法是使用 Observable 间隔：

this.now = interval(1000).pipe(timestamp(), map(t => new Date(t.timestamp)));

然后使用 async 和 date 管道来显示数据：

Now: {{ this.now | async | date: 'mediumTime' }}

【讨论】：

【解决方案2】：

我创建了一个小指令来显示数字时钟。需要自调用函数，因为渲染时钟时会有一秒的延迟。

var app = angular.module('clock', []);

app.directive("digitalClock", function($timeout, dateFilter) {
  return {
    restrict: 'E',
    link: function(scope, iElement) {
      (function updateClock() {
        iElement.text(dateFilter(new Date(), 'H:mm:ss'));
        $timeout(updateClock, 1000);
      })();
    }
  };
});

<!DOCTYPE html>
<html ng-app="clock">

<head>
  <meta charset="utf-8" />
  <title>Digital clock</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <h1 class="text-center">Digital Clock</h1>
<digital-clock></digital-clock>
</body>

</html>

【讨论】：

【解决方案3】：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

【讨论】：

【解决方案4】：

您可以使用此代码。它更简单。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="clockApp">
    <head>
        <script src="../angular.js"></script>
    </head>
    <body>
        <h1> Clock App </h1>
        <div ng-controller="MainCtrl">
            <p> The current time is : {{timeString}}</p>
        </div>

        <script>
          var module = angular.module("clockApp", []);
          module.controller("MainCtrl", TimeCtrl);     

                    function TimeCtrl($scope){
                         var currentDate = new Date();
                        $scope.timeString = currentDate.toTimeString();                        
                    }
       </script>
    </body>
</html>

【讨论】：

此代码不会更新时钟，因此不适合“滴答”时钟

【解决方案5】：

这是我使用$interval 能想到的最简单的答案：

Example

JS

function TimeCtrl($interval) {
     var timeController = this;

     timeController.clock = { time: "", interval: 1000 };

     $interval(function () { 
         timeController.clock.time = Date.now();}, 
         timeController.clock.interval);
}

HTML

<div ng-controller='TimeCtrl as timeCtrl'>
    <p>{{ timeCtrl.clock.time | date:'medium'}}</p>
</div>

这是一个计时器实现，使用相同的 $interval 注册函数在开始时注册一个新的间隔，并在停止时取消间隔。

警告！无法绑定到 $interval 延迟参数

Example

JS

function TimeCtrl($interval) {

    var timeController = this;

    timeController.clock = { time: "", interval: 1000 };

    timeController.timer = { time: (new Date()).setHours(0,0,0,0), startTime: "", interval: 10};

    timeController.timerProcess;

    timeController.timerStart = function() {
      // Register the interval and hold on to the interval promise
      timeController.timerProcess = RegisterInterval(TimerTick, timeController.timer.interval);
      // Reset the time to 0
      timeController.timerReset();
    }

    timeController.timerReset = function() {
      timeController.timer.startTime = Date.now();
      timeController.timer.time = (new Date()).setHours(0,0,0,0); 
    }

    timeController.timerStop = function() {
        // If there is an interval process then stop it
        if(timeController.timerProcess){
        $interval.cancel(timeController.timerProcess);
      }
    }

    function ClockTick() { 
        timeController.clock.time = Date.now();
    }

    function TimerTick(){
      // Increment the time by the time difference now and the timer start time
      timeController.timer.time += Date.now() - timeController.timer.startTime;
      // Reset the start time
      timeController.timer.startTime = Date.now();
    }

    function RegisterInterval(regFunction, regInterval){
      return $interval(regFunction, regInterval);
    } 

    RegisterInterval(ClockTick, timeController.clock.interval);
}

HTML

<div ng-controller='TimeCtrl as timeCtrl'>
    <p>Date: {{ timeCtrl.clock.time | date:'medium'}}</p>
     <p>Timer: {{ timeCtrl.timer.time | date:'mm:ss:sss'}}</p>
     <button type="button" ng-click="timeCtrl.timerStart()">Start</button>
     <button type="button" ng-click="timeCtrl.timerReset()">Reset</button>
     <button type="button" ng-click="timeCtrl.timerStop()">Stop</button>
</div>

【讨论】：

【解决方案6】：

只是想改进 Armen 的答案。您可以使用$interval 服务来设置计时器。

var module = angular.module('myApp', []);

module.controller('TimeCtrl', function($scope, $interval) {
  var tick = function() {
    $scope.clock = Date.now();
  }
  tick();
  $interval(tick, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller='TimeCtrl'>
    <p>{{ clock | date:'HH:mm:ss'}}</p>
  </div>
</div>

【讨论】：

【解决方案7】：

在 Angular 文档中有一个 example 说明如何使用间隔来实现这一点。您也可以在 plunker 中试用。

代码如下：

Javascript：

<script>
  angular.module('intervalExample', [])
    .controller('ExampleController', ['$scope', '$interval',
      function($scope, $interval) {
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.blood_1 = 100;
        $scope.blood_2 = 120;

        var stop;
        $scope.fight = function() {
          // Don't start a new fight if we are already fighting
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
              $scope.blood_1 = $scope.blood_1 - 3;
              $scope.blood_2 = $scope.blood_2 - 4;
            } else {
              $scope.stopFight();
            }
          }, 100);
        };

        $scope.stopFight = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        $scope.resetFight = function() {
          $scope.blood_1 = 100;
          $scope.blood_2 = 120;
        };

        $scope.$on('$destroy', function() {
          // Make sure that the interval is destroyed too
          $scope.stopFight();
        });
      }])
    // Register the 'myCurrentTime' directive factory method.
    // We inject $interval and dateFilter service since the factory method is DI.
    .directive('myCurrentTime', ['$interval', 'dateFilter',
      function($interval, dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format,  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            element.text(dateFilter(new Date(), format));
          }

          // watch the expression, and update the UI on change.
          scope.$watch(attrs.myCurrentTime, function(value) {
            format = value;
            updateTime();
          });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }]);
</script>

HTML

<div>
  <div ng-controller="ExampleController">
    <label>Date format: <input ng-model="format"></label> <hr/>
    Current time is: <span my-current-time="format"></span>
    <hr/>
    Blood 1 : <font color='red'>{{blood_1}}</font>
    Blood 2 : <font color='red'>{{blood_2}}</font>
    <button type="button" data-ng-click="fight()">Fight</button>
    <button type="button" data-ng-click="stopFight()">StopFight</button>
    <button type="button" data-ng-click="resetFight()">resetFight</button>
  </div>
</div>

结果如下：

【讨论】：

【解决方案8】：

这对我来说非常有效，我认为对于新手来说很容易理解。亲身体验here

JavaScript：

function TimeCtrl($scope, $timeout) {
    $scope.clock = "loading clock..."; // initialise the time variable
    $scope.tickInterval = 1000 //ms

    var tick = function() {
        $scope.clock = Date.now() // get the current time
        $timeout(tick, $scope.tickInterval); // reset the timer
    }

    // Start the timer
    $timeout(tick, $scope.tickInterval);
}

HTML：

<div ng-controller='TimeCtrl'>
    <p>{{ clock  | date:'medium'}}</p>
</div>

不要忘记在你的 body 标签中包含 angularJS 和 'ng-app'。

【讨论】：

这可以使用 $interval 更优雅地实现。
我有一些问题：为什么不从使用 tick() 开始；为什么使用范围而不是 lick var time = this;？
您还应该使用指令来执行此操作，并且能够执行以下操作：<current-time></current-time>
发现这个页面充满了例子——应该会有所帮助。 siddii.github.io/angular-timer
我同意安德烈，$scope.clock = Date.now();$interval(function () { $scope.clock = Date.now(); }, 1000);