Question

我想创建一个秒表。我用Google搜索并获得了一些关于如何制作计时器的提示。这是我在我的控制器中所做的：

$scope.value = 0;
$scope.startTimer = function() {

     $scope.value = 0;

    var change = function() {
        $scope.value += 1000;
        $timeout(change,1000);
    };
    $timeout(change, 1000);
}

以我的html格式显示此格式：

<label>{{value | date: 'hh:mm:ss'}}</label>

问题是时钟总是从04:00:00开始，当我调用startTimer()函数时，它会启动计时器，但我希望计时器如下：

00:00:00

00:00:01

00:00:02

...

谁能告诉我如何在00:00:00启动计时器？

Answer 1

已编辑：使用间隔计时器更新了代码，因此现在代码包含$timeout和$interval的计时器。
在这里，你自己做过滤器：

＆＃13;

var app = angular.module("myApp",[]);
app.controller("myController",function($scope, $timeout, $interval){
   
   //timer with timeout
   $scope.timerWithTimeout = 0;
   $scope.startTimerWithTimeout = function() {
    $scope.timerWithTimeout = 0;
    if($scope.myTimeout){
      $timeout.cancel($scope.myTimeout);
    }
    $scope.onTimeout = function(){
        $scope.timerWithTimeout++;
        $scope.myTimeout = $timeout($scope.onTimeout,1000);
    }
    $scope.myTimeout = $timeout($scope.onTimeout,1000);
  };
  
  $scope.resetTimerWithTimeout = function(){
    $scope.timerWithTimeout = 0;
    $timeout.cancel($scope.myTimeout);
  }
  
  //timer with interval
  $scope.timerWithInterval = 0;
   $scope.startTimerWithInterval = function() {
    $scope.timerWithInterval = 0;
    if($scope.myInterval){
      $interval.cancel($scope.myInterval);
    }
    $scope.onInterval = function(){
        $scope.timerWithInterval++;
    }
    $scope.myInterval = $interval($scope.onInterval,1000);
  };
  
  $scope.resetTimerWithInterval = function(){
    $scope.timerWithInterval = 0;
    $interval.cancel($scope.myInterval);
  }
})
app.filter('hhmmss', function () {
  return function (time) {
    var sec_num = parseInt(time, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <label>Timer with timeout: {{timerWithTimeout | hhmmss}}</label>
  <button ng-click="startTimerWithTimeout()">Start Timer</button>
  <button ng-click="resetTimerWithTimeout()">reset tiemr</button>
  <br><br>
  <label>Timer with interval: {{timerWithInterval | hhmmss}}</label>
  <button ng-click="startTimerWithInterval()">Start Timer</button>
  <button ng-click="resetTimerWithInterval()">reset tiemr</button>
</div>

＆＃13;

添加：对于计时器，最好使用$interval代替$timeout。并始终将$ interval引用到某个变量：$scope.timer = $interval(change, 1000);，因此您可以在每次重置时销毁它：$interval.cancel($scope.timer);。

AngularJS - 如何从00:00:00格式开始制作秒表

1 个答案: