Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
更新時間：2017年10月18日 09:30:11 作者：Hank_謝旱
最近做項目的時候又遇到了驗證碼倒計時的需求，發(fā)現(xiàn)這個功能還是挺實用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實現(xiàn)獲取驗證碼倒計時按鈕的簡單方法，需要的朋友可以參考借鑒，下面來一起看看吧。
前言
本文主要介紹了關(guān)于Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的相關(guān)內(nèi)容，關(guān)于這個功能相信不用多介紹，大家都不陌生，所以下面話不多說了，來一起看看實現(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是否可以點擊；
3.ng-if="showTimer"控制數(shù)字顯示；
4.ng-click="onClick()"觸發(fā)效果，文字text默認(rèn)“獲取驗證碼”，點擊之后為“60s后重新獲取”。
三、效果圖
1、點擊前
2、點擊后
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Angular+ionic實現(xiàn)折疊展開效果的示例代碼
這篇文章主要介紹了Angular+ionic實現(xiàn)折疊展開效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
Angularjs編寫KindEditor,UEidtor,jQuery指令
使用過 AngularJS 的朋友應(yīng)該最感興趣的是它的指令?，F(xiàn)今市場上的前端框架也只有AngularJS 擁有自定義指令的功能，并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。2015-01-01
angular.JS實現(xiàn)網(wǎng)頁禁用調(diào)試、復(fù)制和剪切
這篇文章主要給大家介紹了angular.JS實現(xiàn)網(wǎng)頁禁用調(diào)試、復(fù)制和剪切的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了AngularJS的Cookies讀寫操作,結(jié)合實例形式分析了ngCookies模塊與get和put方法進(jìn)行cookie讀寫操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了解析Angular 2+ 樣式綁定方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
AngularJS基于provider實現(xiàn)全局變量的讀取和賦值方法
這篇文章主要介紹了AngularJS基于provider實現(xiàn)全局變量的讀取和賦值方法,結(jié)合實例形式分析了AngularJS全局變量的聲明、賦值、讀取等相關(guān)使用技巧,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了angular實現(xiàn)導(dǎo)航菜單切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Angular4學(xué)習(xí)教程之DOM屬性綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之DOM屬性綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
本篇文章主要介紹了angular第三方包開發(fā)整理(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
通過AngularJS實現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實現(xiàn)圖片上傳及縮略圖展示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01