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实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
Uploadify上传文件方法
Mar 16 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
Content-type 的说明
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
extjs render 用法介绍
2013/09/11 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
python 实现aes256加密
2020/11/27 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
安全责任书怎么写
2014/07/28 职场文书
热情服务标语
2014/10/07 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫