源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-03-11 22:43 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Ionic + Angular.js实现验证码倒计时功能的方法
[b]前言[/b] 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是[url=http://www.1sucai.cn/article/115952.htm]这里[/url],现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: [b]效果图:[/b] [img]http://files.jb51.net/file_images/article/201706/2017612102902396.gif?2017512102911[/img] [b]正文[/b] 首先介绍下与本文相关的概念 [code]$interval[/code] [code]$interval [/code]是[code] window.setInterval [/code]的 Angular 包装形式,函数如果在没有被取消的时候会无限执行。(取消使用 cancel(promise) ) [b]用法:[/b]
$interval(fn,delay,[count],[invokeApply],[Pass]);
参数说明: [list] [*]fn : 无限执行的函数 必须参数,必传[/*] [*]delay : 每次调用的间隔毫秒数值 必须参数,必传[/*] [*]count : 循环次数的数值,如果没设置,则无限制循环 非必须参数,可不传[/*] [*]invokeApply : 如果设置为false,则避开脏值检查,否则将调用$apply 非必须参数,可不传[/*] [*]Pass : 函数的附加参数 非必须参数,可不传 [/*] [/list] [b]方法:[/b] 1、[code]cancel(promise)[/code]       promise:[code]$interval[/code]函数的返回值。 [b]具体实现[/b]
 $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);
最后别忘了注入 [code]$interval [/code]。 [b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部