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 相关文章推荐
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP文件操作方法汇总
2015/07/01 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
Python Requests安装与简单运用
2016/04/07 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python梯度下降算法的实现
2020/02/24 Python
vue常用指令代码实例总结
2020/03/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
环境科学专业大学生自荐信格式
2013/09/21 职场文书
计算机网络专业求职信
2014/06/05 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
个人收入证明格式
2015/06/24 职场文书
图书馆义工感想
2015/08/07 职场文书
大学生党课感想
2015/08/11 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers