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 验证码60秒发送

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

angular 验证码倒计时60秒

angular 验证码倒计时60秒
  • Zhooson
  • Zhooson
  • 2017年04月01日 10:36
  • 598

angular2 倒计时组件

angular2 倒计时组件项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件。便于以后复用。组件需求如下: - 接收父级组件传递截止日期 - 接收父级组件传递标题组件效果变...

angular倒计时指令

app.directive("CountDown",['$interval',function ($interval) { return { restrict: "E", repl...

怎样用angular写一个倒计时10秒

倒计时 var app = angular.module("myApp", []); app.co...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

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

1:判断当前设备是否ios/andriod: var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs 验证码60秒倒计时
举报原因:
原因补充:

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