AngularJS - 如何从 00:00:00 格式开始制作秒表 [英] AngularJS - How to make a stop watch starting from 00:00:00 format

问题描述

我想制作一个秒表.我用谷歌搜索并得到了一些关于如何制作计时器的提示.这是我在控制器中所做的:

$scope.value = 0;$scope.startTimer = function() {$scope.value = 0;变量更改 = 函数(){$scope.value += 1000;$超时(更改，1000)；};$超时(更改，1000)；}

在我的 html 中以这种格式显示值:

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

问题是时钟总是从 04:00:00 开始，当我调用 startTimer() 函数时，它可以正常启动计时器，但我希望计时器像:

00:00:00

00:00:01

00:00:02

....

谁能告诉我如何在 00:00:00 开始计时?

解决方案

已更新了带有间隔计时器的代码，因此现在代码包含带有 $timeout 和 $interval 的两个计时器>.
来吧，制作你自己的过滤器:

var app = angular.module("myApp",[]);app.controller("myController",function($scope, $timeout, $interval){//带超时的定时器$scope.timerWithTimeout = 0;$scope.startTimerWithTimeout = function() {$scope.timerWithTimeout = 0;如果($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);}//带间隔的定时器$scope.timerWithInterval = 0;$scope.startTimerWithInterval = function() {$scope.timerWithInterval = 0;如果($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 () {返回函数(时间){var sec_num = parseInt(time, 10);//不要忘记第二个参数var hours = Math.floor(sec_num/3600);var 分钟 = 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;回程时间；}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="myApp" ng-controller="myController"><label>带超时的定时器:{{timerWithTimeout |hhmmss}}</label><button ng-click="startTimerWithTimeout()">启动计时器</button><button ng-click="resetTimerWithTimeout()">reset tiemr</button><br><br><label>带间隔的定时器:{{timerWithInterval |hhmmss}}</label><button ng-click="startTimerWithInterval()">启动计时器</button><button ng-click="resetTimerWithInterval()">重置时间</button>

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

I want to create a stop watch. I googled and got a few tips on how to make a timer. Here is what I have done in my controller:

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

     $scope.value = 0;

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

And in my html displayed value in this format:

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

The problem is the clock always starts at 04:00:00 and when I call the startTimer() function, it starts the timer okay but I want the timer to be like:

00:00:00

00:00:01

00:00:02

....

Can anyone tell me how to start timer at 00:00:00?

解决方案

EDITED: Updated code with interval timer, so now code contains both timers with $timeout and $interval.
Here you go, make your own filter:

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;
  }
});

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

Addition: For timer it is better to use $interval instead of $timeout. and always reference $interval to some variable :$scope.timer = $interval(change, 1000); , so you can destroy it on each reset:$interval.cancel($scope.timer); .

这篇关于AngularJS - 如何从 00:00:00 格式开始制作秒表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！