前端學習——ionic/AngularJs——擷取驗證碼倒計時按鈕

標籤：驗證   log   gmm   cal   實現原理   src   function   ext   更改   

 按鈕功能為：點擊“擷取驗證碼”——按鈕不可用-設定倒計時-60秒後重新擷取。

 

代碼借鑒於：http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

主要實現原理：點擊後，設定一個$interval，每一秒更改一次剩餘時間，並依賴Angular資料繫結即時顯示在頁面中。設定一個$timeout，60秒後將按鈕初始化到可用狀態。

實現代碼：

（1）js代碼，設定成一個directive以便多次調用。

angular.module(‘winwin‘).directive(‘timerbutton‘, function($timeout, $interval){    return {        restrict: ‘AE‘,        scope: {            showTimer: ‘=‘,            timeout: ‘=‘        },        link: function(scope, element, attrs){            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);            }        },        template: ‘<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>‘    };});

　　（2）html代碼

 <timerbutton show-timer="false">擷取驗證碼</timerbutton>

　　

實現效果：

（1）點擊之前

　　

（2）點擊之後

　　

前端學習——ionic/AngularJs——擷取驗證碼倒計時按鈕