Ionic + Angular.js实现验证码倒计时功能的方法


Posted in Javascript onJune 12, 2017

前言

之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考:

效果图:

Ionic + Angular.js实现验证码倒计时功能的方法

正文

首先介绍下与本文相关的概念 $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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
微信小程序 实现点击添加移除class
Jun 12 #Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 #Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 #Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 #Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 #Javascript
You might like
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python 类的继承实例详解
2017/03/25 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python3实现多线程聊天室
2018/12/12 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python 自由定制表格的实现示例
2020/03/20 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
消防安全管理制度
2014/02/01 职场文书
出纳员岗位职责
2014/03/13 职场文书
中专生自荐信
2014/06/25 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
详解python字符串驻留技术
2021/05/21 Python
为Centos安装指定版本的Docker
2022/04/01 Servers
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python