Ionic Angular 实现验证码倒计时功能
来源:互联网 发布:张予曦开的淘宝店 编辑:程序博客网 时间:2024/06/05 04:51
前段时间分享了 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考:
效果图:
正文
首先介绍下与本文相关的概念 $interval
$interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行。(取消使用 cancel(promise) )
用法:
$interval(fn,delay,[count],[invokeApply],[Pass]);
参数说明:
- fn : 无限执行的函数 必须参数,必传
- delay : 每次调用的间隔毫秒数值 必须参数,必传
- count : 循环次数的数值,如果没设置,则无限制循环 非必须参数,可不传
- invokeApply : 如果设置为false,则避开脏值检查,否则将调用$apply 非必须参数,可不传
- Pass : 函数的附加参数 非必须参数,可不传
方法:
- 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 。
- 我的博客:博客传送门
- 我的简书:简书传送门
- 我的CSDN:CSDN传送门
- 我的GitHub:GitHub传送门
0 0
- Ionic Angular 实现验证码倒计时功能
- ionic 发送验证码倒计时
- 实现 发送验证码的倒计时功能
- Handler实现验证码获取倒计时功能
- Android验证码倒计时功能实现
- 实现获取验证码倒计时功能
- iOS - 实现验证码倒计时功能
- Android开发:验证码倒计时功能实现
- React Native实现验证码倒计时功能
- Android 验证码倒计时功能的实现
- angular 验证码倒计时60秒
- angular 验证码倒计时60秒
- 验证码倒计时 实现
- 实现验证码倒计时
- 获取验证码倒计时功能
- 发送验证码倒计时功能
- Android 验证码倒计时功能
- iOS发送验证码倒计时功能的实现
- The first blog
- 我的第一个开源项目
- 正则表达式简明笔记
- iPhone 应用里与外设装置交换数据的原理(转)
- 生成模型与判别模型
- Ionic Angular 实现验证码倒计时功能
- 用jstl标签截取从后台获取的url扩展名拼接到src里
- sublime + cocos lua
- 虚拟机三种网络模式(桥接、NAT、Host-only)
- STRUTS系列之 Action配置
- poj 3468 线段树 lazy标记模板
- nyoj711&&zznu1624 最舒适的路线(第六届河南省程序设计大赛 广搜)
- PHP7和HHVM的性能之争
- 一种局部ui界面切换解决方案