快捷導(dǎo)航

Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法

更新時(shí)間：2017年06月12日 10:31:11 作者：SmartSean

驗(yàn)證碼倒計(jì)時(shí)這個(gè)功能相信對(duì)大家每個(gè)人來(lái)說(shuō)都不陌生，之前介紹了在Android中的實(shí)現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。

前言

之前跟大家分享了關(guān)于 Android 原生實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)，地址是這里，現(xiàn)在公司使用 Ionic 開(kāi)發(fā)的 App 也要實(shí)現(xiàn)類似的功能，現(xiàn)在也記錄下來(lái)，供大家參考：

效果圖：

正文

首先介紹下與本文相關(guān)的概念 $interval

$interval 是 window.setInterval 的 Angular 包裝形式，函數(shù)如果在沒(méi)有被取消的時(shí)候會(huì)無(wú)限執(zhí)行。（取消使用 cancel(promise) ）

用法：

$interval(fn,delay,[count],[invokeApply],[Pass]);

參數(shù)說(shuō)明：

fn : 無(wú)限執(zhí)行的函數(shù) 必須參數(shù)，必傳
delay : 每次調(diào)用的間隔毫秒數(shù)值必須參數(shù)，必傳
count : 循環(huán)次數(shù)的數(shù)值，如果沒(méi)設(shè)置，則無(wú)限制循環(huán) 非必須參數(shù)，可不傳
invokeApply : 如果設(shè)置為false，則避開(kāi)臟值檢查，否則將調(diào)用$apply 非必須參數(shù)，可不傳
Pass : 函數(shù)的附加參數(shù) 非必須參數(shù)，可不傳

方法：

1、cancel(promise)

promise：$interval函數(shù)的返回值。

具體實(shí)現(xiàn)

 $scope.description = "獲取驗(yàn)證碼";

 var timerHandler = null;

 /**
 * 倒計(jì)時(shí)
 * @param time 控制循環(huán)次數(shù)
 */
 var countDown = function (second,time) {
 timerHandler = $interval(function () {
  if (second <= 0) {
  $interval.cancel(timerHandler);
  second = 59;
  $scope.description = "獲取驗(yàn)證碼";
  } else {
  $scope.description = second + "s 后可重發(fā)";
  second--;
  }
 }, 1000, time)
 }

調(diào)用

countDown(59,60);

最后別忘了注入 $interval 。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

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