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

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


慕哥6287543
浏览 1223回答 1
1回答

MM们

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-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;   
打开App,查看更多内容
随时随地看视频慕课网APP