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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
js实现转动骰子模型
Oct 24 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
微信小程序 实现点击添加移除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 Xdebug的安装与使用详解
2013/06/20 PHP
PHP合并静态文件详解
2014/11/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
Underscore源码分析
2015/12/30 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
简单谈谈python中的多进程
2016/11/06 Python
微信跳一跳python代码实现
2018/01/05 Python
python设置环境变量的作用和实例
2019/07/09 Python
python获取array中指定元素的示例
2019/11/26 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
在keras里实现自定义上采样层
2020/06/28 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
个人担保书格式范文
2014/05/12 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
销售会议开幕词
2015/01/28 职场文书
合作意向书范本
2019/04/17 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers