Question

我的计时器有点麻烦。我可能会让它变得比它应该更复杂，因为我需要的是以下内容：

我需要从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开始至少。但是我有这些功能的按钮，这也是我遇到问题的地方。

$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分钟。是否可以通过停止和恢复功能来完成？

感谢。

Answer 1

如果我理解angular-timer docs结束时间设置了倒计时时间。它不提供最大值。

end-time根据预定义的结束时间设置倒计时（in 毫秒）。

要获得最大值，您可以检查每个tick事件以查看是否已达到配置的最大值。我在下面创建了一个示例，其中计时器在达到最大值（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>

角度计时器 - .stop（）和.resume（）问题

1 个答案: