我怎样才能在几分钟内进行角度倒计时？答案

【问题标题】：how can i make an angular countdown in minutes?我怎样才能在几分钟内进行角度倒计时？
【发布时间】：2016-06-14 03:03:53
【问题描述】：

这是我的代码，但我找不到如何在几分钟内进行倒计时，我的意思是，不是 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>

【问题讨论】：

您需要自己进行计算。与angular无关，是javascript数学和字符串编译
什么意思？每 30 分钟倒计时一次？
是的，没错，我有 3000 秒，但我用 @Muli Yulzary 的回答解决了这个问题。

标签： javascript angularjs countdown

【解决方案1】：

你的控制器没问题，你只需要：

将 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 或下面的 sn-p 中查看它的工作原理。

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>

【讨论】：

【解决方案2】：

这是一个简短的例子。

查看：

<div ng-controller="countCtrl">
<span>{{30 - secondsPassed/60}}:{{59 - secondsPassed%60}}</span>
<button ng-click="startTimer()">Click me to start the timer</button>
</div>

控制器：

.controller('countCtrl', function($scope, $interval){
 $scope.secondsPassed = 0;
 var ref;

 $scope.startTimer = function(){
  //Clean interval instance if button clicked multiple times.
  $interval.cancel(ref);
  $scope.secondsPassed = 0;
  ref = $interval(function(){
   $scope.secondsPassed++;
   if($scope.secondsPassed >= 30 * 60){
    //Clean interval instance if we passed the 30 min mark.
    $interval.cancel(ref);
   }
  }, 1000);
 };

 //Clean the interval instance if scope destroyed
 $scope.$on('$destroy', function(){
  $interval.cancel(ref);
 });
});

【讨论】：

【解决方案3】：

以上答案会在 00:00 秒后重置时间，并再次从 59:59 开始倒计时。

我已将答案更改为在到达 00:00 后停止

app.controller('fiveCtrl', function ($scope, $timeout) {
  $scope.counter = 3000;
  $scope.onTimeout = function () {
    if ($scope.counter == 0) {
        $scope.counter = 0;
    }
    else{
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout, 1000);
    }       
 }
 var mytimeout = $timeout($scope.onTimeout, 1000);
});


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

HTML 将是

  <div ng-controller="fiveCtrl">
   <b> Test time Left : {{counter | secondsToDateTime | date:'mm:ss'}}</b> 
     <div ng-show="counter<60 && counter!=0"> Test expires in {{counter}} seconds</div>
     <div ng-show="counter==0"> Test expired : {{counter}} seconds left</div>
  </div>

【讨论】：