AngularJS 验证码60秒倒计时功能的实现

 更新时间:2017年06月05日 14:31:55   作者:青_zq  
最近在做AngularJS 项目,这是写的一个60秒倒计时功能,下面小编给大家介绍AngularJS 验证码60秒倒计时功能的实现,需要的朋友参考下吧

最近在做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秒倒计时功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详谈angularjs中路由页面强制更新的问题

    详谈angularjs中路由页面强制更新的问题

    下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS  $on、$emit和$broadcast的使用

    AngularJS $on、$emit和$broadcast的使用

    本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下
    2016-09-09
  • ng-alain的sf如何自定义部件的流程

    ng-alain的sf如何自定义部件的流程

    这篇文章主要介绍了ng-alain的sf如何自定义部件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 详解Angular2组件之间如何通信

    详解Angular2组件之间如何通信

    本篇文章主要介绍了详解Angular2组件之间如何通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解基于angular路由的requireJs按需加载js

    详解基于angular路由的requireJs按需加载js

    本篇文章主要介绍了详解基于angular路由的requireJs按需加载js,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • 解决angular双向绑定无效果,ng-model不能正常显示的问题

    解决angular双向绑定无效果,ng-model不能正常显示的问题

    今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular 4中如何显示内容的CSS样式示例代码

    Angular 4中如何显示内容的CSS样式示例代码

    这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • AngularJS 整理一些优化的小技巧

    AngularJS 整理一些优化的小技巧

    本文主要介绍AngularJS 一些优化上的小技巧,这里整理了几种方法供大家参考,有兴趣的小伙伴可以参考下
    2016-08-08
  • AngularJS基础知识笔记之过滤器

    AngularJS基础知识笔记之过滤器

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能
    2015-05-05
  • Angular.js中$apply()和$digest()的深入理解

    Angular.js中$apply()和$digest()的深入理解

    相信大家都知道$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的,从而才能理解AngularJS本身是如何运作的。本文的目的就是介绍$digest()和$apply()是如何确确实实的对你有用的。下面来一起看看吧。
    2016-10-10

最新评论