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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
javaScript基础详解
Jan 19 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
js同时按下两个方向键
2007/12/01 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
一个C/C++编程面试题
2013/11/10 面试题
一道SQL面试题
2012/12/31 面试题
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
匿名检举信范文
2015/03/02 职场文书
工作会议简报
2015/07/20 职场文书
2016年寒假家长评语
2015/10/10 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS