Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法
更新時間：2017年06月12日 10:31:11 作者：SmartSean
驗證碼倒計時這個功能相信對大家每個人來說都不陌生，之前介紹了在Android中的實現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。
前言
之前跟大家分享了關(guān)于 Android 原生實現(xiàn)驗證碼倒計時，地址是這里，現(xiàn)在公司使用 Ionic 開發(fā)的 App 也要實現(xiàn)類似的功能，現(xiàn)在也記錄下來，供大家參考：
效果圖：
正文
首先介紹下與本文相關(guān)的概念 $interval
$interval 是 window.setInterval 的 Angular 包裝形式，函數(shù)如果在沒有被取消的時候會無限執(zhí)行。（取消使用 cancel(promise) ）
用法：
$interval(fn,delay,[count],[invokeApply],[Pass]);
參數(shù)說明：
- fn : 無限執(zhí)行的函數(shù) 必須參數(shù)，必傳
- delay : 每次調(diào)用的間隔毫秒數(shù)值 必須參數(shù)，必傳
- count : 循環(huán)次數(shù)的數(shù)值，如果沒設(shè)置，則無限制循環(huán) 非必須參數(shù)，可不傳
- invokeApply : 如果設(shè)置為false，則避開臟值檢查，否則將調(diào)用$apply 非必須參數(shù)，可不傳
- Pass : 函數(shù)的附加參數(shù) 非必須參數(shù)，可不傳
方法：
1、cancel(promise)
promise：$interval函數(shù)的返回值。
具體實現(xiàn)
$scope.description = "獲取驗證碼";
var timerHandler = null;
/**
* 倒計時
* @param time 控制循環(huán)次數(shù)
*/
var countDown = function (second,time) {
timerHandler = $interval(function () {
if (second <= 0) {
$interval.cancel(timerHandler);
second = 59;
$scope.description = "獲取驗證碼";
} else {
$scope.description = second + "s 后可重發(fā)";
second--;
}
}, 1000, time)
}
調(diào)用
countDown(59,60);
最后別忘了注入 $interval 。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了ionic本地相冊、拍照、裁剪、上傳（單圖完全版），非常具有實用價值，需要的朋友可以參考下2017-10-10
Angular 的 Change Detection機制實現(xiàn)詳解
這篇文章主要為大家介紹了Angular 的 Change Detection機制實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解
今天小編就為大家分享一篇對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-03-03
這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下2015-02-02
AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能,結(jié)合完整實例形式分析了AngularJS隨機數(shù)生成與數(shù)值判定相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實例形式分析了Angular4表單響應(yīng)功能的具體實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
攔截器就是在目標達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期，下面這篇文章主要給大家介紹了關(guān)于Angular.js中$http攔截器的介紹及使用的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考學(xué)習。2017-07-07
詳解angularJs中自定義directive的數(shù)據(jù)交互
這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)問題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請求,php無法接收Post的數(shù)據(jù)的問題及解決方案,本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08