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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
ES6箭头函数和扩展实例分析
May 23 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
Python入门_条件控制(详解)
2017/05/16 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
wxpython布局的实现方法
2019/11/01 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
美德好少年主要事迹
2014/01/29 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
答辩状格式范本
2015/05/22 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL