快捷導(dǎo)航

Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法

更新時(shí)間：2017年10月18日 09:30:11 作者：Hank_謝旱

最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求，發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡單方法，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

本文主要介紹了關(guān)于Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的相關(guān)內(nèi)容，關(guān)于這個(gè)功能相信不用多介紹，大家都不陌生，所以下面話不多說了，來一起看看實(shí)現(xiàn)的方法吧。

一、controller中代碼

angular.module('controllers')
 .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) {
 $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);
 };
 });

二、html頁面中

<button class="yz-btn" ng-click="onClick()" ng-disabled="timer"><span ng-if="showTimer">{{timerCount}}</span>{{text}}</button>

注：

1.class="yz-btn"為button的樣式，可自己修改；

2.ng-disabled="timer"控制button是否可以點(diǎn)擊；

3.ng-if="showTimer"控制數(shù)字顯示；

4.ng-click="onClick()"觸發(fā)效果，文字text默認(rèn)“獲取驗(yàn)證碼”，點(diǎn)擊之后為“60s后重新獲取”。

三、效果圖

1、點(diǎn)擊前

2、點(diǎn)擊后

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

Angular2自定義分頁組件
本篇文章主要介紹了Angular2自定義分頁組件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-04-04
詳解使用angular-cli發(fā)布i18n多國語言Angular應(yīng)用
這篇文章主要介紹了詳解使用angular-cli發(fā)布i18n多國語言Angular應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
AngularJS ui-router (嵌套路由)實(shí)例
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
詳解Angular系列之變化檢測(cè)(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(cè)(Change Detection)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
Angular使用ControlValueAccessor創(chuàng)建自定義表單控件
這篇文章主要介紹了Angular使用ControlValueAccessor創(chuàng)建自定義表單控件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
深入淺析AngularJS和DataModel
這篇文章主要介紹了深入淺析AngularJS和DataModel 的相關(guān)資料,需要的朋友可以參考下
2016-02-02
在Angular?中使用?Flex?布局的示例詳解
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個(gè)布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無需額外的樣式,對(duì)Angular使用?Flex?布局相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2024-02-02
AngularJS Controller作用域
這篇文章主要為大家詳細(xì)介紹了AngularJS Controller的作用域，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ng-app指令的功能及自動(dòng)加載機(jī)制的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-01-01
詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-08-08