AngularJS 驗證碼60秒倒計時功能的實現(xiàn)
更新時間：2017年06月05日 14:31:55 作者：青_zq
最近在做AngularJS 項目，這是寫的一個60秒倒計時功能，下面小編給大家介紹AngularJS 驗證碼60秒倒計時功能的實現(xiàn)，需要的朋友參考下吧
最近在做AngularJS 項目，這是寫的一個60秒倒計時, angularjs 與jq不同， 不是使用dom節(jié)點操作，而是數(shù)據(jù)操作，寫倒計時，最好是使用$timeout與$interval ，不要使用settimeout與setinterval 。$timeout與$interval 可使綁定數(shù)據(jù)直接更新。
html
<a href="javascript:" rel="external nofollow" ng-click="sendphonecode(reg_phone)" ng-class="paraclass" ng-bind="paracont">獲取驗證碼</a>
angularjs
angular.module('controllers', []).controller('registerCtrl', function($scope,$interval){
$scope.paracont = "獲取驗證碼";
$scope.paraclass = "but_null";
$scope.paraevent = true;
var second = 60,
timePromise = undefined;
timePromise = $interval(function(){
if(second<=0){
$interval.cancel(timePromise);
timePromise = undefined;
second = 60;
$scope.paracont = "重發(fā)驗證碼";
$scope.paraclass = "but_null";
$scope.paraevent = true;
}else{
$scope.paracont = second + "秒后可重發(fā)";
$scope.paraclass = "not but_null";
second--;
}
},1000,100);
});
以上所述是小編給大家介紹的AngularJS 驗證碼60秒倒計時功能的實現(xiàn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
利用Angularjs和原生JS分別實現(xiàn)動態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動態(tài)的效果，這樣對于用戶體檢來說非常好，這篇文章分別用Angularjs和原生JS兩種方法來實現(xiàn)動態(tài)效果的輸入框，具有一定的參考價值，有需要的小伙伴們可以來參考借鑒。2016-09-09
詳解webpack+angular2開發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack+angular2開發(fā)環(huán)境搭建，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法
這篇文章主要給大家介紹了關(guān)于Angular4綁定html內(nèi)容出現(xiàn)警告的處理方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
本篇文章主要介紹了Angular 作用域的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令2016-03-03
angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個控制器中共享服務(wù)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
這篇文章主要介紹了angularjs指令之綁定策略（@、=、&）,AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域，同指令外部的作用域進(jìn)行數(shù)據(jù)綁定。2017-04-04
AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信
這篇文章主要介紹了AngularJS ngModel實現(xiàn)指令與輸入直接的數(shù)據(jù)通信的相關(guān)資料,需要的朋友可以參考下2016-09-09
本篇文章主要介紹了Angular4自制一個市縣二級聯(lián)動組件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11