Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
更新時間：2017年10月18日 09:30:11 作者：Hank_謝旱
最近做項目的時候又遇到了驗證碼倒計時的需求，發(fā)現(xiàn)這個功能還是挺實用的，所以就想著總結一下，下面這篇文章主要給大家介紹了關于利用Angular.js如何實現(xiàn)獲取驗證碼倒計時按鈕的簡單方法，需要的朋友可以參考借鑒，下面來一起看看吧。
前言
本文主要介紹了關于Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的相關內容，關于這個功能相信不用多介紹，大家都不陌生，所以下面話不多說了，來一起看看實現(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 = "獲取驗證碼";
$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 = "獲取驗證碼";
$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是否可以點擊；
3.ng-if="showTimer"控制數(shù)字顯示；
4.ng-click="onClick()"觸發(fā)效果，文字text默認“獲取驗證碼”，點擊之后為“60s后重新獲取”。
三、效果圖
1、點擊前
2、點擊后
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
本篇文章主要介紹了Angular2自定義分頁組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
詳解使用angular-cli發(fā)布i18n多國語言Angular應用
這篇文章主要介紹了詳解使用angular-cli發(fā)布i18n多國語言Angular應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
詳解Angular系列之變化檢測(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(Change Detection)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Angular使用ControlValueAccessor創(chuàng)建自定義表單控件
這篇文章主要介紹了Angular使用ControlValueAccessor創(chuàng)建自定義表單控件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了深入淺析AngularJS和DataModel 的相關資料,需要的朋友可以參考下2016-02-02
在本教程中,您使用?Flex?布局與?Angular?應用程序,它允許您構建一個布局,使用預配置的?Flexbox?CSS?樣式,而無需額外的樣式,對Angular使用?Flex?布局相關知識感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要為大家詳細介紹了AngularJS Controller的作用域，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
AngularJS框架的ng-app指令與自動加載實現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現(xiàn)方法,結合實例形式分析了ng-app指令的功能及自動加載機制的實現(xiàn)技巧,需要的朋友可以參考下2017-01-01
詳解AngularJS1.x學習directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學習directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08