欧美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í)顯示在頁面中。設(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)文章

  • AngularJS入門教程之雙向綁定詳解

    AngularJS入門教程之雙向綁定詳解

    本文主要介紹AngularJS 雙向綁定，這里整理了詳細(xì)的知識(shí)資料并講解，而且附有代碼示例，有興趣的小伙伴可以參考下
    2016-08-08
  • AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例

    AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能,涉及AngularJS事件響應(yīng)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • Angular5集成eventbus的示例代碼

    Angular5集成eventbus的示例代碼

    這篇文章主要介紹了Angular5集成eventbus的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • Angluar+zorro實(shí)現(xiàn)無限級(jí)菜單

    Angluar+zorro實(shí)現(xiàn)無限級(jí)菜單

    這篇文章主要為大家詳細(xì)介紹了Angluar+zorro實(shí)現(xiàn)無限級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • angular 實(shí)現(xiàn)下拉列表組件的示例代碼

    angular 實(shí)現(xiàn)下拉列表組件的示例代碼

    這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • AngularJS 輸入驗(yàn)證的原理解析

    AngularJS 輸入驗(yàn)證的原理解析

    AngularJS 的輸入驗(yàn)證是一個(gè)強(qiáng)大的功能,可以幫助開發(fā)者確保用戶輸入的數(shù)據(jù)是準(zhǔn)確和完整的,這篇文章主要介紹了AngularJS 輸入驗(yàn)證,需要的朋友可以參考下
    2024-07-07
  • 詳解Angular中$cacheFactory緩存的使用

    詳解Angular中$cacheFactory緩存的使用

    這篇文章主要介紹了Angular中$cacheFactory緩存的使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-08-08
  • 將angular-ui的分頁組件封裝成指令的方法詳解

    將angular-ui的分頁組件封裝成指令的方法詳解

    這篇文章主要給大家介紹了將angular-ui的分頁組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺有一定的參考價(jià)值，需要的朋友下面來一起看看吧。
    2017-05-05
  • AngularJs動(dòng)態(tài)加載模塊和依賴注入詳解

    AngularJs動(dòng)態(tài)加載模塊和依賴注入詳解

    這篇文章主要為大家介紹了AngularJs動(dòng)態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下
    2016-01-01
  • 解決AngualrJS頁面刷新導(dǎo)致異常顯示問題

    解決AngualrJS頁面刷新導(dǎo)致異常顯示問題

    本篇文章主要介紹了解決AngualrJS頁面刷新導(dǎo)致異常顯示問題的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-04-04

最新評(píng)論