ionic+AngularJs實現擷取驗證碼倒計時按鈕，ionicangularjs

ionic+AngularJs實現擷取驗證碼倒計時按鈕，ionicangularjs

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

主要實現原理：點擊後，設定一個$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）點擊之後

　　　

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。