验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。
前言
之前跟大家分享了关于 Android 原生实现验证码倒计时，地址是这里，现在公司使用 Ionic 开发的 App 也要实现类似的功能，现在也记录下来，供大家参考：
效果图：
正文
首先介绍下与本文相关的概念 $interval
$interval 是 window.setInterval 的 Angular 包装形式，函数如果在没有被取消的时候会无限执行。（取消使用 cancel(promise) ）
用法：
$interval(fn,delay,[count],[invokeApply],[Pass]);
参数说明：
fn : 无限执行的函数 必须参数，必传
delay : 每次调用的间隔毫秒数值 必须参数，必传
count : 循环次数的数值，如果没设置，则无限制循环 非必须参数，可不传
invokeApply : 如果设置为false，则避开脏值检查，否则将调用$apply 非必须参数，可不传
Pass : 函数的附加参数 非必须参数，可不传
方法：
1、cancel(promise)
promise：$interval函数的返回值。
具体实现
$scope.description = "获取验证码"; var timerHandler = null; /** * 倒计时 * @param time 控制循环次数 */ var countDown = function (second,time) { timerHandler = $interval(function () { if (second <= 0) { $interval.cancel(timerHandler); second = 59; $scope.description = "获取验证码"; } else { $scope.description = second + "s 后可重发"; second--; } }, 1000, time) }
调用
countDown(59,60);
最后别忘了注入 $interval 。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: