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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
ElementUI radio组件选中小改造
Aug 12 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 生成文字png图片的代码
2011/04/17 PHP
深入php self与$this的详解
2013/06/08 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
来自qq的javascript面试题
2010/07/24 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
致裁判员加油稿
2014/02/08 职场文书
快餐公司创业计划书
2014/04/29 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
中学教师读书笔记
2015/07/01 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
资产移交协议书
2016/03/24 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android