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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
过滤器vue.filters的使用方法实现
Sep 18 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 output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
对Angular中单向数据流的深入理解
2018/03/31 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
python实现log日志的示例代码
2018/04/28 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
高级工程师岗位职责
2013/12/15 职场文书
地球一小时宣传标语
2014/06/24 职场文书
公司踏青活动方案
2014/08/16 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
初三毕业评语
2014/12/26 职场文书
2019年工作总结范文
2019/05/21 职场文书