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 。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。2021-05-05
在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧2024-01-01
下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
本篇文章主要介绍了详解如何构建Angular项目目录结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要给大家介绍了关于angular浏览器兼容性问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
这篇文章主要介绍了Angular5中状态管理的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
这篇文章主要介绍了 Bootstrap + AngularJS 实现简单的数据过滤字符查找功能，代码简单易懂，非常不错具有参考借鉴价值,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了AngularJS用户选择器指令,结合实例形式分析了angular指令实现选择器功能的具体操作步骤与相关实现技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Angular6升级到Angular8报错问题的解决合集，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文我们将介绍 Reactive Form 表单验证的相关知识，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论