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

前言

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

效果图：

正文

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

总结

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

# ionic  # angularjs  # angular  # 验证码倒计时  # ionic验证码倒计时  # Angular.js实现获取验证码倒计时60秒按钮的简单方法  # AngularJS 验证码60秒倒计时功能的实现  # angular2倒计时组件使用详解  # AngularJs 延时器、计时器实例代码  # ionic+AngularJs实现获取验证码倒计时按钮  # AngularJS 支付倒计时功能实现思路  # Angular6 发送手机验证码按钮倒计时效果实现方法  # Angular2实现的秒表及改良版示例  # 验证码  # 不传  # 倒计时  # 也要  # 如有  # 这篇文章  # 别忘了  # 谢谢大家  # 设置为  # 大家分享  # 则将  # 返回值  # 重发  # code  # pre  # setInterval  # class  # promise  # cancel  # window 

相关文章： 如何快速搭建高效简练网站？  建站之星导航配置指南：自助建站与SEO优化全解析  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何快速生成橙子建站落地页链接？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  如何将凡科建站内容保存为本地文件？  如何制作一个表白网站视频,关于勇敢表白的小标题？  大连网站制作公司哪家好一点,大连买房网站哪个好？  北京的网站制作公司有哪些,哪个视频网站最好？  教程网站设计制作软件,怎么创建自己的一个网站？  建站之星3.0如何解决常见操作问题？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  制作网站的模板软件,网站怎么建设？  如何快速搭建高效WAP手机网站？  网站制作员失业,怎样查看自己网站的注册者？  C++如何使用std::optional？（处理可选值）  建站之星如何通过成品分离优化网站效率？  建站之星后台搭建步骤解析：模板选择与产品管理实操指南  做企业网站制作流程,企业网站制作基本流程有哪些？  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  如何优化Golang Web性能_Golang HTTP服务器性能提升方法  宝塔面板创建网站无法访问？如何快速排查修复？  安徽网站建设与外贸建站服务专业定制方案  建站之星微信建站一键生成小程序+多端营销系统  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  建站之星导航如何优化提升用户体验？  再谈Python中的字符串与字符编码（推荐）  焦点电影公司作品,电影焦点结局是什么？  网站制作培训多少钱一个月,网站优化seo培训课程有哪些？  建站之星如何实现网站加密操作？  建站之星上传入口如何快速找到？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  建站之星伪静态规则如何正确配置？  建站之星24小时客服电话如何获取？  如何在阿里云香港服务器快速搭建网站？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  建站之星×万网：智能建站系统+自助建站平台一键生成  建站org新手必看：2024最新搭建流程与模板选择技巧  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  如何用5美元大硬盘VPS安全高效搭建个人网站？  完全自定义免费建站平台：主题模板在线生成一站式服务  网页设计与网站制作内容,怎样注册网站？  建站之星与建站宝盒如何选择最佳方案？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  如何在云服务器上快速搭建个人网站？  建站10G流量真的够用吗？如何应对访问高峰？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  公司网站制作价格怎么算,公司办个官网需要多少钱？