角度計時器 - .stop（）和.resume（）問題

我的計時器有點麻煩。我可能已經使它比它應該更復雜，因爲我需要的是以下內容：角度計時器 - .stop（）和.resume（）問題

我需要計數從00:00到45:00，我需要能夠停止並恢復計時器在這些界限內。

現在我有了這個計時器代碼：

<timer id="timer" autostart="false" start-time="coutingStart" end-time="countingEnd">{{mminutes}}:{{sseconds}}</timer>

countingStart和countingEnd初始化像這樣：

var time = (45 * 60000); // should give me 45 minutes of time. 
$scope.countingStart = (new Date()).getTime(); 
$scope.countingEnd = (new Date()).getTime() + time;

這上面代碼中的作品，至少我認爲它。我有這個功能的按鈕就可以了：

$scope.startGame = function() { 
    $scope.gameIsLive = true; 
    document.getElementById('timer').start(); 
};

它開始我的櫃檯，沒有問題，它從00:00開始ATLEAST。但是，然後我有這些功能的按鈕，這也是我遇到我的問題。

$scope.PauseGame = function() { 
    switch ($scope.periodNum) { 
     case 1: 
      document.getElementById('timer').stop(); 
      $scope.PauseIsActive = true; 
      break; 
     case 2: 
      document.getElementById('timer').stop(); 
      $scope.PauseIsActive = true; 
      break; 
    } 
}; 

$scope.ResumeGame = function() { 
    switch ($scope.periodNum) { 
     case 1: 
      document.getElementById('timer').resume(); 
      $scope.PauseIsActive = false; 
      break; 
     case 2: 
      document.getElementById('timer').resume(); 
      $scope.PauseIsActive = false; 
      break; 
    } 
};

兩個pauseGame()和resumeGame()按預期工作。他們正在暫停並恢復計時器。但是，當我暫停定時器說00:10併爲自己計數10秒，然後恢復它的計時器現在站在00:20，這使我只失去了10秒的計時器。

我可以認爲我的問題是在$scope.counterStart和$scope.counterEnd的實例化中。但我不確定。我如何從00:00到45:00計數，並且在需要時仍能夠停止和恢復時鐘？

角度計時器使用Date對象和毫秒來計算時間，所以我想我必須使用這種方法來獲得00:00這是現在和計數45分鐘前進。停止和恢復功能可以以其他方式完成嗎？

感謝。

來源

2016-08-25 Lucas Reppe Welander

https://github.com/siddii/angular-timer的是，我現在使用的指令。 –

如果我明白angular-timer docs結束時間設置倒計時時間。它不提供最大值。

結束時間根據預定義的結束時間（在毫秒內）設置倒計時。

要獲得最大值，可以檢查每個滴答事件以查看是否已達到配置的最大值。我在下面創建了一個示例，其中定時器在達到最大值（10秒）時停止。

(function() { 
 
    angular 
 
    .module('exampleApp', ['timer']) 
 
    .controller('ExampleController', ExampleController); 
 

 
    function ExampleController($scope, TimerStatusEnum, $timeout) { 
 
    var vm = this; 
 
    vm.max = 10000; // 10 seconds 
 
    vm.isMaxReached = false; 
 
    vm.timerStatus = TimerStatusEnum.NotStarted; 
 

 
    vm.startTimer = function() { 
 
     if (!vm.isMaxReached) { 
 
     if (vm.timerStatus === TimerStatusEnum.NotStarted) { 
 
      $scope.$broadcast('timer-start'); 
 
      vm.timerStatus = TimerStatusEnum.Running 
 
     } else if (vm.timerStatus === TimerStatusEnum.Stopped) { 
 
      $scope.$broadcast('timer-resume'); 
 
      vm.timerStatus = TimerStatusEnum.Running 
 
     } 
 
     } 
 
    }; 
 

 
    vm.stopTimer = function() { 
 
     if (vm.timerStatus === TimerStatusEnum.Running) { 
 
     $scope.$broadcast('timer-stop'); 
 
     vm.timerStatus = TimerStatusEnum.Stopped 
 
     } 
 
    }; 
 

 
    vm.isTimerStopped = function() { 
 
     return vm.timerStatus === TimerStatusEnum.Stopped; 
 
    } 
 

 
    vm.isTimerRunning = function() { 
 

 
     return vm.timerStatus === TimerStatusEnum.Running; 
 
    } 
 

 
    $scope.$on('timer-tick', function(event, args) { 
 
     var roundedMiliSecondCount = Math.round(args.millis/1000) * 1000; 
 
     if (roundedMiliSecondCount === vm.max) { 
 
     $timeout(function() { 
 
      vm.isMaxReached = true; 
 
      vm.stopTimer(); 
 
     }, 0); 
 
     } 
 
    }); 
 

 
    } 
 
    ExampleController.$inject = ['$scope', 'TimerStatusEnum', '$timeout']; 
 
})(); 
 

 
(function() { 
 
    angular 
 
    .module('exampleApp') 
 
    .constant('TimerStatusEnum', { 
 
     'NotStarted': 0, 
 
     'Stopped': 1, 
 
     'Running': 2 
 
    }); 
 

 
})();

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-timer/1.3.4/angular-timer.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/humanize-duration/3.9.1/humanize-duration.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ExampleController as vm"> 
 
    <timer id="timer" autostart="false" interval="1000">{{mminutes}}:{{sseconds}}</timer> 
 
    <button ng-click="vm.startTimer()" ng-disabled="vm.isTimerRunning() || vm.isMaxReached">Start Timer</button> 
 
    <button ng-click="vm.stopTimer()" ng-disabled="vm.isTimerStopped() || vm.isMaxReached">Stop Timer</button> 
 
    <p ng-if="vm.isMaxReached">Max time has been reached</p> 
 
</body> 
 

 
</html>

來源

2016-08-25 11:31:49 ScottL

角度計時器 - .stop（）和.resume（）問題

回答

相關問題