我怎样才能在几分钟内进行 angular 倒计时?
how can i make an angular countdown in minutes?
这是我的代码,但我找不到如何在几分钟内进行倒计时,我的意思是,不是 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>
这是一个简单的例子。
查看:
<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);
});
});
你的控制器没问题,你只需要:
- 将 3000 更改为 1800(30 分钟为 1800 秒)。
- 在递减
counter
之前添加条件以避免掉头:
if ($scope.counter > 0) $scope.counter--;
现在显示秒数 'mm:ss'
将计数器转换为日期。您可以使用过滤器(从这个)
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>
以上答案会在 00:00 秒后重置时间并再次从 59:59 开始倒计时。
i have changed the answer to stop once reached 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);
};
}])
the Html would be
<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>
这是我的代码,但我找不到如何在几分钟内进行倒计时,我的意思是,不是 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>
这是一个简单的例子。
查看:
<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);
});
});
你的控制器没问题,你只需要:
- 将 3000 更改为 1800(30 分钟为 1800 秒)。
- 在递减
counter
之前添加条件以避免掉头:if ($scope.counter > 0) $scope.counter--;
现在显示秒数 'mm:ss'
将计数器转换为日期。您可以使用过滤器(从这个
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>
以上答案会在 00:00 秒后重置时间并再次从 59:59 开始倒计时。
i have changed the answer to stop once reached 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);
};
}])
the Html would be
<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>