angularjs做一个简单的倒计时

我想和Angular js打个招呼。 这是我的代码:

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}}刷新它不能帮助我吗? 谢谢!

请看这里的例子。 这是一个简单的例子! 我认为你可以很容易地修改,以创build一个倒计时。

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript代码:

 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); } } 

HTML标记:

 <!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> 

从版本1.3开始,模块ng中有一个服务: $interval

 function countController($scope, $interval){ $scope.countDown = 10; $interval(function(){console.log($scope.countDown--)},1000,0); }​​ 

谨慎使用:

注意:这个服务创build的间隔必须在完成时明确销毁。 特别是当控制器的作用域或指令的元素被销毁时,它们不会被自动销毁。 你应该考虑到这一点,并确保在适当的时候总是取消间隔。 有关如何以及何时执行此操作的更多详细信息,请参阅下面的示例。

来自: Angular的官方文档 。

你应该使用$ scope。$ apply()当你从angular度框架之外执行一个angular度expression式。

 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/

我更新先生ganaraj回答显示停止和恢复function,并添加angular度js过滤格式倒计时器

这是在jsFiddle

控制器代码

 '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; } }); 

过滤代码从Robover从stackoverflow适应

 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)); }; }); 

https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A

Igor Minar的一些很棒的jsfiddle显示了$ defer的使用,并且在setInterval调用中包装$ apply。

这可能有助于“如何在AngularJS中编写倒计时手表的代码”

第1步:HTML代码示例

 <div ng-app ng-controller="ExampleCtrl"> <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div> <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div> <div ng-show="countDown_text == 0">Your password is expired!.</div> </div> 

第2步:AngulaJs代码示例

 function ExampleCtrl($scope, $timeout) { var countDowner, countDown = 10; countDowner = function() { if (countDown < 0) { $("#warning").fadeOut(2000); countDown = 0; return; // quit } else { $scope.countDown_text = countDown; // update scope countDown--; // -1 $timeout(countDowner, 1000); // loop it again } }; $scope.countDown_text = countDown; countDowner() } 

下面给出了在AngularJs中倒计时的完整示例。

 <!DOCTYPE html> <html> <head> <title>AngularJS Example - Single Timer Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script> function ExampleCtrl($scope, $timeout) { var countDowner, countDown = 10; countDowner = function() { if (countDown < 0) { $("#warning").fadeOut(2000); countDown = 0; return; // quit } else { $scope.countDown_text = countDown; // update scope countDown--; // -1 $timeout(countDowner, 1000); // loop it again } }; $scope.countDown_text = countDown; countDowner() } </script> </head> <body> <div ng-app ng-controller="ExampleCtrl"> <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div> <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div> <div ng-show="countDown_text == 0">Your password is expired!.</div> </div> </body> </html> 
 function timerCtrl ($scope,$interval) { $scope.seconds = 0; var timer = $interval(function(){ $scope.seconds++; $scope.$apply(); console.log($scope.countDown); }, 1000); } 

我做的方式,它的工作原理!

  • *angular度版本1.5.8及以上。

有趣的代码

 var app = angular.module('counter', []); app.controller('MainCtrl', function($scope,$interval) { var decreamentCountdown=function() { $scope.countdown -=1; if($scope.countdown<1) { $scope.message="timed out"; } }; var startCountDown=function() { $interval(decreamentCountdown,1000,$scope.countdown) }; $scope.countdown=100; startCountDown(); }); 

Html查看代码。

 <!DOCTYPE html> <html ng-app="counter"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link href="style.css" rel="stylesheet" /> <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.x"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> {{countdown}} {{message}} </body> </html> 
 var timer_seconds_counter = 120; $scope.countDown = function() { timer_seconds_counter--; timer_object = $timeout($scope.countDown, 1000); $scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00'; if ((timer_seconds_counter % 60) < 10) { $scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00'); } else { $scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00'); } $scope.timer += ' minutes' if (timer_seconds_counter === 0) { timer_seconds_counter = 30; $timeout.cancel(timer_object); $scope.timer = '2:00 minutes'; } }