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); }
我更新先生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'; } }
