javascript - 我怎样才能在几分钟内进行 Angular 倒计时？

Question

这是我的代码，但我找不到如何在几分钟内进行倒计时，我的意思是，而不是 3000、30:00...有什么帮助吗？

  <script>
  app.controller("Counter", function($scope,$timeout){
    $scope.counter = 3000;
    $scope.onTimeout = function(){
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
});
 </script>

Answer 1

你的 Controller 没问题，你只需要:

• 将 3000 更改为 1800(30 分钟为 1800 秒)。
• 在递减 counter 之前添加条件以避免反转: if ($scope.counter > 0) $scope.counter--;

现在将秒显示为 'mm:ss' 将计数器转换为日期。您可以使用过滤器(来自这个 answer )

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

然后这样显示:

{{counter | secondsToDateTime | date:'mm:ss'}}

在 fiddle 中查看其工作原理或在下面的代码片段中。

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $timeout) {
  $scope.counter = 1800;
  $scope.onTimeout = function() {
    if ($scope.counter > 0) $scope.counter--;
    mytimeout = $timeout($scope.onTimeout, 1000);
  }
  var mytimeout = $timeout($scope.onTimeout, 1000);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{counter | secondsToDateTime | date:'mm:ss'}}
</div>