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é)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了使用Angular自定義字段校驗指令的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了angularjs 處理多個異步請求方法匯總,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了詳解Angular Karma測試的持續(xù)集成實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了js常用正則表達式集錦，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
angularjs實現(xiàn)多選框分段全選效果實現(xiàn)
這篇文章主要為大家介紹了angularjs實現(xiàn)多選框分段全選效果實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例的相關(guān)資料,需要的朋友可以參考下2016-10-10
關(guān)于angularJs指令的Scope(作用域)介紹
下面小編就為大家?guī)硪黄猘ngularJs指令的Scope(作用域)介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
AngularJS基礎(chǔ) ng-value 指令簡單示例
本文主要介紹AngularJS ng-value 指令,這里對ng-value 的基礎(chǔ)資料做了整理，并附實例代碼，有需要的小伙伴可以參考下2016-08-08
Angular響應(yīng)式表單使用顯式的、不可變的方式,管理表單在特定的時間點上的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Angular中使用嵌套Form的詳細步驟,需要的朋友可以參考下2022-04-04
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05