Question

我在$ scope.number变量中有数字，每秒更新一次：
1
2
3
70 ....

如何获得时间格式的秒表：
00:01
00:02
00:03
1点10

Answer 1

您可以为此创建过滤器。

angular.module('my-app').filter("timeFilter", function() {
    return function(number) {
        var seconds;
        var minutes;
        var hours;

        if (number < 60) {
            seconds = number;
        }
        else if (number >= 60 && number <= 3600) {
            minutes = Math.floor(number / 60);
            seconds = number % 60;
        }
        else {
            hours = Math.floor(number / 3600);
            minutes = Math.floor((number % 3600) / 60);
            seconds = Math.floor((number % 3600) % 60);
        }
        seconds = seconds < 10 ? "0" + seconds : seconds;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        hours = hours < 10 ? "0" + hours: hours;

        return hours + ":" + minutes + ":" + seconds;
    }
});

您的控制器可能看起来像这样

angular.module('my-app').controller('myController', ['$scope', '$interval',
'TimeFilter', function($scope, $interval, TimeFilter) {
    $scope.number = 0;

    function updateNumber() {
        $scope.number++;
    });

    $interval(updateNumber, 1000);
}]);

在您的视图中，您希望附加双向数据绑定，以便控制器可以更新视图中的值，并且视图可以将值发送回控制器。我们使用ng-bind执行此操作。

要将数字显示为过滤器，您可以使用竖线字符（|）

<div ng-controller="myController" ng-bind="number">
  <p>{{number | timeFilter }</p>
</div>

02:13:20应该显示

希望这有帮助

注意：我的语法可能不完全正确，如果是这样，我道歉。但是，您也可以使用本网站作为指南

https://docs.angularjs.org/api/ng/service/ $间隔

这是我发现秒表的工作小提琴。 此信用不在我这里。

http://jsfiddle.net/joshkurz/5LCXU/

Answer 2

使用实例new Date，您可以像我一样编写更简洁的代码。此函数是递归的，并且以1000ms的间隔调用，因此它每秒都会在浏览器中刷新。 Obs：前缀vm是控制器var vm = this;

    vm.inicialDate = undefined;
    vm.stopWatch = '00:00:00';

    vm.tick = function() {
        if(vm.inicialDate) {
            var dateNow = Date.now();
            var timezone = new Date().getTimezoneOffset();

            vm.stopWatch = new Date(new Date(dateNow).getTime() - new Date(vm.inicialDate).getTime());
            vm.stopWatch.setMinutes(vm.stopWatch.getMinutes() + timezone);
        }
        $timeout(vm.tick, 1000);
    };

    $timeout(vm.tick, 1000);

如果您要使用另一个起始日期而不是Date.now()，则可以从服务器获取DateTime并使用以下行：

vm.inicialDate = new Date(parseInt(response.data.InicialDate.substr(6)));

易于显示为HTML：

<h3 ng-show="your condition" style="color: #8E0000">{{vm.stopWatch | date: 'HH:mm:ss'}}</h3>

AngularJs：如何以时间形式制作秒表

2 个答案: