ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕

更新時(shí)間：2017年04月22日 10:33:30 作者：Damono

本篇文章主要介紹了ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕，具有一定的參考價(jià)值，有興趣的可以了解一下。

按鈕功能為：點(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: '<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">獲取驗(yàn)證碼</timerbutton>

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例
下面小編就為大家分享一篇AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題
這篇文章主要介紹了Angular js雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題,需要的朋友可以參考下
2017-06-06
AngularJS中$http使用的簡單介紹
在AngularJS中主要使用$http服務(wù)與遠(yuǎn)程http服務(wù)器交互，本篇文章主要介紹了AngularJS中$http使用的簡單介紹，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03
Angular網(wǎng)絡(luò)請求的封裝方法
本篇文章主要介紹了Angular網(wǎng)絡(luò)請求的封裝方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
詳解Angular依賴注入
依賴注入(DI -- Dependency Injection)是一種重要的應(yīng)用設(shè)計(jì)模式。Angular里面也有自己的DI框架，在設(shè)計(jì)應(yīng)用時(shí)經(jīng)常會(huì)用到它，它可以我們的開發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過在類上添加@Injectable裝飾器來告訴系統(tǒng)這個(gè)類(服務(wù))是可注入的。
2021-05-05
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-09-09
AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法
本篇文章主要介紹了ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Angular中$compile源碼分析
本文給大家分享的是通過angular中的$compile源碼進(jìn)行分析，從而更好的理解angular的使用，非常的不錯(cuò)，希望大家能夠喜歡。
2016-01-01
angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解
今天小編就為大家分享一篇angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
angularJS結(jié)合canvas畫圖例子
這篇文章主要介紹了angularJS結(jié)合canvas畫圖例子的方法,需要的朋友可以參考下
2015-02-02