欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)顯示在頁(yè)面中。設(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)擊之后

　　　

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

相關(guān)文章

最新評(píng)論