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的星级评分插件
Aug 12 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 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+SqlServer实现分页显示
2006/10/09 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php实现网站留言板功能
2015/11/04 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
浅谈Vue.js
2017/03/02 Javascript
js中作用域的实例解析
2017/03/16 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
js代码实现轮播图
2020/05/04 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python开发之list操作实例分析
2016/02/22 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
安全施工责任书
2014/08/25 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
安全第一课观后感
2015/06/18 职场文书
小学运动会通讯稿
2015/07/18 职场文书
汽车车尾标语大全
2015/08/11 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书