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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
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 JSON格式数据交互实例代码详解
2011/01/13 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php和nginx交互实例讲解
2019/09/24 PHP
js类 from qq
2006/11/13 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
node.js入门教程
2014/06/01 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
通过实例学习Python Excel操作
2020/01/06 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
岗位职责风险点
2014/03/12 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
工厂标语大全
2014/10/06 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis