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 相关文章推荐
浅谈JavaScript字符集
May 22 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery操作之效果详解
May 19 jQuery
JS按钮闪烁功能的实现代码
Jul 21 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
vue两组件间值传递 $router.push实现方法
May 15 Javascript
详解Javascript实践中的命令模式
May 05 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
Python线程指南详细介绍
2017/01/05 Python
详解Python中类的定义与使用
2017/04/11 Python
用python实现的线程池实例代码
2018/01/06 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python实现多人聊天室
2020/03/31 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python实现直播推流效果
2019/11/26 Python
信号生成及DFT的python实现方式
2020/02/25 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
详解python tcp编程
2020/08/24 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
研究生求职推荐信范文
2013/11/30 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
学生检讨书如何写
2014/10/30 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python