ionic+AngularJs实现获取验证码倒计时按钮

前端之家收集整理的这篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取

主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示页面中。设置一个$timeout,60秒后将按钮初始化到可用状态。

实现代码

(1)js代码,设置成一个directive以便多次调用

获取验证码";
  scope.onClick = function(){
    scope.showTimer = true;
    scope.timer = true;
    scope.text = "秒后重新<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>";
    var counter = $interval(function(){
      scope.timerCount = scope.timerCount - 1;
    },1000);

    $timeout(function(){
      scope.text = "<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>验证码";
      scope.timer = false;
      $interval.cancel(counter);
      scope.showTimer = false;
      scope.timerCount = scope.timeout / 1000;
    },scope.timeout);
  }
},template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"&gt;<span ng-if="showTimer"&gt;{{ timerCount }}</span>{{text}}</button>'

};
});

(2)HTML代码

获取验证码

实现效果

(1)点击之前

(2)点击之后

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/39792.html

猜你在找的JavaScript相关文章