前端学习——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: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>' }; });
(2)html代码
<timerbutton show-timer="false">获取验证码</timerbutton>
实现效果:
(1)点击之前
(2)点击之后
干货:
<html ng-app="myApp"> <head> <title>测试_短信验证码</title> <meta charset="utf-8" /> </head> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/> <body> <timerbutton show-timer="false">获取验证码</timerbutton> </body> </html> <script> angular.module('myApp',[]).directive('timerbutton', function($timeout, $interval){ return { restrict: 'AE', scope: { showTimer: '=', timeout: '=' }, link: function(scope, element, attrs){ scope.timer = false; scope.timeout = 60000; console.log("1-进来了"); scope.timerCount = scope.timeout / 1000; scope.text = "获取验证码"; scope.onClick = function(){ console.log("2-进来了"); scope.showTimer = true; scope.timer = true; scope.text = "秒后重新获取"; var counter = $interval(function(){ scope.timerCount = scope.timerCount - 1; console.log("3-进来了"); }, 1000); $timeout(function(){ console.log("进来了"); scope.text = "获取验证码"; scope.timer = false; $interval.cancel(counter); scope.showTimer = false; scope.timerCount = scope.timeout / 1000; }, scope.timeout); } }, template: '<button ng-click="onClick()" class="btn btn-primary" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>' }; }); </script>