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 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 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中文本操作的类
2007/03/17 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python绘制地震散点图
2019/06/18 Python
python交易记录整合交易类详解
2019/07/03 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
关于打架的检讨书
2014/01/17 职场文书
护林防火标语
2014/06/27 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
婚庆答谢词
2015/01/04 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
nginx内存池源码解析
2021/11/20 Servers
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL