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

Question

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

Answer 1

按钮功能为：点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。&nbsp;主要实现原理：点击后，设置一个$interval，每一秒更改一次剩余时间，并依赖Angular数据绑定实时显示在页面中。设置一个$timeout，60秒后将按钮初始化到可用状态。&nbsp;实现代码：&nbsp;（1）js代码，设置成一个directive以便多次调用。&nbsp; &nbsp; &nbsp;angular.module('winwin').directive('timerbutton', function($timeout, $interval){ &nbsp; &nbsp;return { &nbsp; &nbsp; &nbsp;restrict: 'AE', &nbsp; &nbsp; &nbsp;scope: { &nbsp; &nbsp; &nbsp; &nbsp;showTimer: '=', &nbsp; &nbsp; &nbsp; &nbsp;timeout: '=' &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp;link: function(scope, element, attrs){ &nbsp; &nbsp; &nbsp; &nbsp;scope.timer = false; &nbsp; &nbsp; &nbsp; &nbsp;scope.timeout = 60000; &nbsp; &nbsp; &nbsp; &nbsp;scope.timerCount = scope.timeout / 1000; &nbsp; &nbsp; &nbsp; &nbsp;scope.text = "获取验证码"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.onClick = function(){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.showTimer = true; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.timer = true; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.text = "秒后重新获取"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var counter = $interval(function(){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.timerCount = scope.timerCount - 1; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, 1000); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$timeout(function(){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.text = "获取验证码"; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.timer = false; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$interval.cancel(counter); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.showTimer = false; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.timerCount = scope.timeout / 1000; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, scope.timeout); &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp;template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>' &nbsp; &nbsp;}; &nbsp;}); &nbsp; &nbsp; &nbsp; &nbsp;（2）html代码&nbsp; &nbsp; &nbsp; <timerbutton show-timer="false">获取验证码</timerbutton> &nbsp; &nbsp;实现效果：&nbsp;（1）点击之前&nbsp;　　&nbsp;（2）点击之后&nbsp;