如何将计时器值格式更改为 MM:Sec 从角度 js 中的固定计数器答案

【问题标题】：How to chage timer value format to MM:Sec from fixed counter in angular js如何将计时器值格式更改为 MM:Sec 从角度 js 中的固定计数器
【发布时间】：2016-09-12 17:42:41
【问题描述】：

我有一个计时器的 AngularJS 代码，在启动计数器时，计时器从 300 开始倒计时到 0。它工作正常。但是现在我想用 MM:SEC 格式（时钟）即 5:00 替换 300 并继续并在 0:00 结束，这是我无法做到的。我的代码

    angular.module('TimerApp', [])
      .controller('TimerCtrl', function($scope, $timeout) {
        $scope.counter = 300;

        var mytimeout = null; // the current timeoutID

        // actual timer method, counts down every second, stops on zero
        $scope.onTimeout = function() {
          if ($scope.counter === 0) {
            $scope.$broadcast('timer-stopped', 0);
            $timeout.cancel(mytimeout);
            return;
          }
          $scope.counter--;
          mytimeout = $timeout($scope.onTimeout, 1000);
        };

        $scope.startTimer = function() {
          mytimeout = $timeout($scope.onTimeout, 1000);
        };

        // stops and resets the current timer
        $scope.stopTimer = function() {
          $scope.$broadcast('timer-stopped', $scope.counter);
          $scope.counter = 30;
          $timeout.cancel(mytimeout);
        };

        // triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
        $scope.$on('timer-stopped', function(event, remaining) {
          if (remaining === 0) {
            console.log('your time ran out!');
          }
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app='TimerApp'>
    <div ng-controller="TimerCtrl">
      {{counter}}
      <button ng-click='startTimer()'>Start</button>
    </div>
  </div>

上面的工作 JSFiddle：http://jsfiddle.net/fq4vg/1796/

【问题讨论】：

Angularjs seconds to time filter的可能重复

标签： javascript angularjs

【解决方案1】：

您可以像下面这样做一些小改动。

angular.module('TimerApp', [])
  .controller('TimerCtrl', function($scope, $timeout) {
    $scope.counter = 300;
    $scope.time =  Math.floor($scope.counter/60)+':' +$scope.counter % 60;//time representation..
    var mytimeout = null; // the current timeoutID

    // actual timer method, counts down every second, stops on zero
    $scope.onTimeout = function() {
      if ($scope.counter === 0) {
        $scope.$broadcast('timer-stopped', 0);
        $timeout.cancel(mytimeout);
        return;
      }
      // var secs = 300;
      $scope.counter--;
      //decrement the clock representation...
      $scope.time = Math.floor($scope.counter/60)+':' +$scope.counter % 60;
      mytimeout = $timeout($scope.onTimeout, 1000);
    };

    $scope.startTimer = function() {
      mytimeout = $timeout($scope.onTimeout, 1000);
    };

    // stops and resets the current timer
    $scope.stopTimer = function() {
      $scope.$broadcast('timer-stopped', $scope.counter);
      $scope.counter = 30;
      $timeout.cancel(mytimeout);
    };

    // triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
    $scope.$on('timer-stopped', function(event, remaining) {
      if (remaining === 0) {
        console.log('your time ran out!');
      }
    });
  });

您的 HTML 将包含以下代码。

<body>
  <div ng-app='TimerApp'>
    <div ng-controller="TimerCtrl">
      {{time}}
      <button ng-click='startTimer()'>Start</button>
    </div>
  </div>

【讨论】：

。谢谢它正在工作。但是当我们有 0-9 秒时，我需要 0 在他们之前 1.e 前 5 分钟，它显示为 5:0 但不是 5:00 。 .怎么可能？你能帮帮我吗。jsfiddle.net/fq4vg/1801
这是针对您的问题的更新 Fiddle jsfiddle.net/fq4vg/1807
@HVarma 你解决了吗？如果这个答案对您有帮助，您可以投票并接受它！
。是的，它有帮助..我会接受它..只是好奇，当这么多人接受你的回答时，你会得到任何钱或类似的东西。我看到很多人问同样的问题，当他们的回答有帮助时..干杯
不，它只是你的工作得到认可，它将帮助其他访问 stackoverflow 寻求答案的人。查看绿色勾号将帮助他们分析解决方案

【解决方案2】：

你为什么不试试这样的东西：http://jsfiddle.net/z18j7o2q/2/

您需要的是自定义过滤器。答案借自here

filter('secondsToDateTime', [function() {
  return function(seconds) {
    return new Date(1970, 0, 1).setSeconds(seconds);
  };
}])

【讨论】：