前端学习——ionic/AngularJs——获取验证码倒计时按钮

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

代码借鉴于：http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

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

实现代码：

（1）js代码，设置成一个directive以便多次调用。

angular.module('winwin').directive('timerbutton', function($timeout, $interval){return {restrict: 'AE',scope: {showTimer: '=',timeout: '='},link: function(scope, element, attrs){scope.timer = false;scope.timeout = 60000;scope.timerCount = scope.timeout / 1000;scope.text = "获取验证码";scope.onClick = function(){scope.showTimer = true;scope.timer = true;scope.text = "秒后重新获取";var counter = $interval(function(){scope.timerCount = scope.timerCount - 1;}, 1000);$timeout(function(){scope.text = "获取验证码";scope.timer = false;$interval.cancel(counter);scope.showTimer = false;scope.timerCount = scope.timeout / 1000;}, scope.timeout);}},template: '{{ timerCount }}{{text}}'};
});

（2）html代码

 <timerbutton show-timer="false">获取验证码timerbutton>

实现效果：

（1）点击之前

（2）点击之后

转载于:https://www.cnblogs.com/Damono/p/5649789.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！