這篇文章主要介紹了Angular.js怎么實(shí)現(xiàn)獲取驗證碼倒計時60秒按鈕,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)總部坐落于成都市區(qū),致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計、網(wǎng)站維護(hù)、公眾號搭建、小程序定制開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè),為互聯(lián)網(wǎng)品牌在互動行銷領(lǐng)域創(chuàng)造價值而不懈努力!
1、js屬于一種解釋性腳本語言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺下運(yùn)行,擁有著跨平臺特性;3、js屬于一種弱類型腳本語言,對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,能夠進(jìn)行類型轉(zhuǎn)換,簡單又容易上手;4、js語言安全性高,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對象的腳本語言,js不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。
一、controller中代碼
angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = false; $scope.timeout = 60000; $scope.timerCount = $scope.timeout / 1000; $scope.text = "獲取驗證碼"; $scope.onClick = function(){ $scope.showTimer = true; $scope.timer = true; $scope.text = "秒后重新獲取"; var counter = $interval(function(){ $scope.timerCount = $scope.timerCount - 1; }, 1000); $timeout(function(){ $scope.text = "獲取驗證碼"; $scope.timer = false; $interval.cancel(counter); $scope.showTimer = false; $scope.timerCount = $scope.timeout / 1000; }, $scope.timeout); }; });
二、html頁面中
<button class="yz-btn" ng-click="onClick()" ng-disabled="timer"><span ng-if="showTimer">{{timerCount}}</span>{{text}}</button>
注:
1.class="yz-btn"
為button的樣式,可自己修改;
2.ng-disabled="timer"
控制button是否可以點(diǎn)擊;
3.ng-if="showTimer"
控制數(shù)字顯示;
4.ng-click="onClick()"
觸發(fā)效果,文字text默認(rèn)“獲取驗證碼”,點(diǎn)擊之后為“60s后重新獲取”。
三、效果圖
1、點(diǎn)擊前
2、點(diǎn)擊后
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Angular.js怎么實(shí)現(xiàn)獲取驗證碼倒計時60秒按鈕”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
文章標(biāo)題:Angular.js怎么實(shí)現(xiàn)獲取驗證碼倒計時60秒按鈕
網(wǎng)頁地址:http://muchs.cn/article22/pdgecc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、電子商務(wù)、標(biāo)簽優(yōu)化、服務(wù)器托管、響應(yīng)式網(wǎng)站、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)