Ionic + Angular.js实现验证码倒计时功能的方法
更新时间：2017年06月12日 10:31:11 作者：SmartSean
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在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 。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了使用Angular自定义字段校验指令的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了angularjs 处理多个异步请求方法汇总,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了详解Angular Karma测试的持续集成实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了js常用正则表达式集锦，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了angularjs实现多选框分段全选效果实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了AngularJS 双向数据绑定详解简单实例的相关资料,需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇angularJs指令的Scope(作用域)介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文主要介绍AngularJS ng-value 指令,这里对ng-value 的基础资料做了整理，并附实例代码，有需要的小伙伴可以参考下2016-08-08
Angular响应式表单使用显式的、不可变的方式,管理表单在特定的时间点上的状态,下面这篇文章主要给大家介绍了关于Angular中使用嵌套Form的详细步骤,需要的朋友可以参考下2022-04-04
AngularJs定时器$interval 和 $timeout详解
这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论