angularjs 验证码60秒倒计时

最新推荐文章于 2024-05-10 09:42:35 发布

青_zq

最新推荐文章于 2024-05-10 09:42:35 发布

阅读量1.7w

点赞数 1

分类专栏： webapp 文章标签： angularjs 60秒验证码手机验证码发送

本文链接：https://blog.csdn.net/xtgefzhangqing/article/details/49933359

版权

webapp 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近在做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);
});