AngularJS 验证码60秒倒计时功能的实现


Posted in Javascript onJune 05, 2017

最近在做AngularJS 项目,这是写的一个60秒倒计时,  angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval 。$timeout与$interval 可使绑定数据直接更新。

html

<a href="javascript:" rel="external nofollow" ng-click="sendphonecode(reg_phone)" ng-class="paraclass" ng-bind="paracont">获取验证码</a>

angularjs

angular.module('controllers', []).controller('registerCtrl', function($scope,$interval){ 
    $scope.paracont = "获取验证码"; 
    $scope.paraclass = "but_null"; 
    $scope.paraevent = true; 
    var second = 60, 
      timePromise = undefined; 
    timePromise = $interval(function(){ 
     if(second<=0){ 
      $interval.cancel(timePromise); 
      timePromise = undefined; 
      second = 60; 
      $scope.paracont = "重发验证码"; 
      $scope.paraclass = "but_null"; 
      $scope.paraevent = true; 
     }else{ 
      $scope.paracont = second + "秒后可重发"; 
      $scope.paraclass = "not but_null"; 
      second--; 
     } 
    },1000,100); 
});

以上所述是小编给大家介绍的AngularJS 验证码60秒倒计时功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 #Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 #Javascript
Vue2.0实现购物车功能
Jun 05 #Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 #Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
You might like
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python网络编程之五子棋游戏
2020/05/14 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
婚礼证婚人证婚词
2014/01/13 职场文书
公司活动总结怎么写
2014/06/25 职场文书
篮球社团活动总结
2014/06/27 职场文书
倡议书的写法
2014/08/30 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
后备干部推荐材料
2014/12/24 职场文书
爱心募捐感谢信
2015/01/22 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL