angularjs 验证码60秒倒计时

原创 2015年11月19日 20:31:46

最近在做angularjs 项目,这是写的一个60秒倒计时,  angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval 。    $timeout与$interval 可使绑定数据直接更新。


html

<a href="javascript:" 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写一个支付倒计时

说明

AngularJS $timeout和 $interval ,定时器手机验证码倒计时

$interval是 window.setInterval的Angular包装形式。$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间)。$interval多数用于计时...

一元购宝倒计时之angularJs-$interval

setInterval更新的数据不能够及时的在页面做更新显示,但angular自带的$interval可以做到,用法和setInterval完全一样,这里只做了秒倒计时,没有做分钟倒计时,另外time...

Angularjs 验证码60秒发送

Angularjs发送验证码 html部分直接任意标签ng-bind值绑定为description即可

AngularJS之定时器(timeout)

1、问题背景     AngularJS某一时间段后,出现另一种情况,这里需要用到定时器timeout2、实现源码 AngularJS之定时器(timeout) va...

web端用js实现倒计时

[html] view plain copy html>       head>        ...

ionic爬过的各种坑;(持续更新)

1:判断当前设备是否ios/andriod: var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u...

Ionic Angular 实现验证码倒计时功能

前段时间分享了 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考:效果图:正文首先介绍下与本文相关的概念 $i...

angularjs中循环定时器的三种方法

本文主要设计定时器的三种循环,模板自配 1、$interlval实现,比较简单和原生js的setInterval比较相似 var app = angular.module('myApp',[]...

5、Angular中的$timeOut定时器

人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的、无须在意的函数。但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到代码莫名其妙的出现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)