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

Question

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

如何获取带时间格式的秒表：
00:01
00:02
00:03
01: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/$interval

这是我找到的秒表的工作小提琴。 这里的功劳不归我所有。

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>

Answer 3

试试这个：

var app = angular.module("myApp",[]);
var controllers = {};
app.controller(controllers);
app.filter('secondsToDateTime', [function () {
    return function (seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}]);
controllers.StopWatchController = ['$scope', '$timeout',function ($scope, $timeout){
     $scope.seconds = 0;
     $scope.running = false;
     
     $scope.StartStopwatch = function () {       
        if (!$scope.running) {
          $scope.running = true;
          $scope.timer();
          }
     }
     
     $scope.StopStopwatch = function () {         
        $scope.running = false;
     }
     
      $scope.ClearStopwatch = function () {
        $scope.running = false; 
        $scope.seconds = 0;
     }
     
     $scope.timer = function () {
          if ($scope.running) {
              timeoutId = $timeout(function () {
                  $scope.updateTime();
                  $scope.timer();
              }, 1000);
          }
      }
      
     $scope.updateTime = function () {
          $scope.seconds++;
      }
}]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="" ng-app="myApp" ng-controller="StopWatchController">
    <h2>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</h2>
    <button type="button" data-ng-click="StartStopwatch()">Start</button>
    <button type="button" data-ng-click="StopStopwatch()">Stop</button>
    <button type="button" data-ng-click="ClearStopwatch()">CLEAR</button>
</div>