如何在AngularJS和HTML中制作滴答时钟(时间)

Question

我是初学者AngularJS/html用户,他一直试图找到一个代码片段来为Web应用程序制作时钟/时间项.

网络搜索并没有像我期望的那样轻松提供直接的结果,所以我想我会发布这个问题以获得一些答案,并使其他人更容易找到.

我已经发布了我的解决方案但是想在选择答案之前看看有没有更好的东西!

Answer 1

只是想改善亚美尼亚的答案.您可以使用该$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>

Answer 2

这对我很有效,我觉得很容易跟随新手.在这里看到它

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'.