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

創(chuàng)新互聯(lián)長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為通城企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，通城網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

按鈕功能為：點(diǎn)擊“獲取驗(yàn)證碼”——按鈕不可用-設(shè)置倒計(jì)時(shí)-60秒后重新獲取。

主要實(shí)現(xiàn)原理：點(diǎn)擊后，設(shè)置一個(gè)$interval，每一秒更改一次剩余時(shí)間，并依賴Angular數(shù)據(jù)綁定實(shí)時(shí)顯示在頁面中。設(shè)置一個(gè)$timeout，60秒后將按鈕初始化到可用狀態(tài)。

實(shí)現(xiàn)代碼：

（1）js代碼，設(shè)置成一個(gè)directive以便多次調(diào)用。

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 = "獲取驗(yàn)證碼";

      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 = "獲取驗(yàn)證碼";
          scope.timer = false;
          $interval.cancel(counter);
          scope.showTimer = false;
          scope.timerCount = scope.timeout / 1000;
        }, scope.timeout);
      }
    },
    template: '{{ timerCount }}{{text}}'
  };
});

（2）html代碼

 獲取驗(yàn)證碼

實(shí)現(xiàn)效果：

（1）點(diǎn)擊之前

（2）點(diǎn)擊之后

以上是“ionic+AngularJs如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！