ionic+AngularJs如何實現獲取驗證碼倒計時按鈕

小編給大家分享一下ionic+AngularJs如何實現獲取驗證碼倒計時按鈕，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

按鈕功能為：點擊“獲取驗證碼”——按鈕不可用-設置倒計時-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）點擊之后

以上是“ionic+AngularJs如何實現獲取驗證碼倒計時按鈕”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！