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中cookie的使用详细分析
May 28 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
微信小程序 video组件详解
Oct 25 Javascript
原生js实现放大镜
Feb 20 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
react redux入门示例
Apr 19 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
node.js如何自定义实现一个EventEmitter
Jul 16 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 for 循环语句使用方法详细说明
2010/05/09 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
javascript document.images实例
2008/05/27 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
JS实现留言板功能
2017/06/17 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python+django快速实现文件上传
2016/10/24 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python中return不返回值的问题解析
2020/07/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
如何利用python读取micaps文件详解
2020/10/18 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
新闻工作者先进事迹
2014/05/26 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python使用openpyxl批量处理数据
2021/06/23 Python