48 html javascript templates countdown angularjs
我想用Angular js做一个countDown.这是我的代码:
Html文件
<div ng-app ng-controller = "countController"> {{countDown}} <div>????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
js文件
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}??
在console.log它工作我有一个倒计时但在{{countdown}}刷新它不能帮助我吗？谢谢!
gan*_*raj 58
请在这里看一下这个例子.这是一个简单的计数例子!我认为您可以轻松修改以创建倒计时.
http://jsfiddle.net/ganarajpr/LQGE2/
function AlbumCtrl($scope,$timeout) {
$scope.counter = 0;
$scope.onTimeout = function(){
$scope.counter++;
mytimeout = $timeout($scope.onTimeout,1000);
}
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.stop = function(){
$timeout.cancel(mytimeout);
}
}
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
{{counter}}
<button ng-click="stop()">Stop</button>
</div>
</body>
</html>
jpf*_*ire 24
从版本1.3开始,模块ng中有一项服务: $interval
function countController($scope, $interval){
$scope.countDown = 10;
$interval(function(){console.log($scope.countDown--)},1000,0);
}??
谨慎使用:
注意:完成后,必须明确销毁此服务创建的间隔.特别是当控制器的范围或指令的元素被销毁时,它们不会自动销毁.您应该考虑到这一点,并确保始终在适当的时候取消间隔.有关如何以及何时执行此操作的详细信息,请参阅下面的示例.
来自:Angular的官方文档.
当您从角度框架外部执行角度表达式时,应该使用$ scope.$ apply().
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
http://jsfiddle.net/andreev_artem/48Fm2/
小智 7
我更新了ganaraj先生的答案,以显示停止和恢复功能,并添加角度js过滤器格式倒数计时器
控制器代码
'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
$scope.counter = 0;
$scope.stopped = false;
$scope.buttonText='Stop';
$scope.onTimeout = function(){
$scope.counter++;
mytimeout = $timeout($scope.onTimeout,1000);
}
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.takeAction = function(){
if(!$scope.stopped){
$timeout.cancel(mytimeout);
$scope.buttonText='Resume';
}
else
{
mytimeout = $timeout($scope.onTimeout,1000);
$scope.buttonText='Stop';
}
$scope.stopped=!$scope.stopped;
}
});
从stackoverflow改编自RobG的过滤器代码
myApp.filter('formatTimer', function() {
return function(input)
{
function z(n) {return (n<10? '0' : '') + n;}
var seconds = input % 60;
var minutes = Math.floor(input / 60);
var hours = Math.floor(minutes / 60);
return (z(hours) +':'+z(minutes)+':'+z(seconds));
};
});