我的计时器有点问题。我可能让它变得比应有的更复杂，因为我需要的是以下内容:
I need to count from 00:00 to say 45:00 and I need to be able to stop and resume the timer within these boundaries.
现在我已经有了这个计时器代码:
<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 开始。 但是我也有具有这些功能的按钮，这就是我遇到问题的地方。
$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，并且仍然能够在需要时停止和恢复时钟？
Angular 计时器使用 Date 对象和毫秒来计算时间，所以我想我必须使用这种方法来获取现在的 00:00 并向前计算 45 分钟。可以通过停止和恢复功能以其他方式完成吗？
谢谢。
最佳答案
如果我理解angular-timer docs end-time 设置倒计时时间。它不提供最大值。
end-time Sets the countdown based on predefined end time (in milliseconds).
要获得最大值，您可以检查每个刻度事件以查看是否已达到配置的最大值。我在下面创建了一个示例，其中计时器在达到最大值(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>关于javascript - Angular 计时器 - .stop() 和 .resume() 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39142480/