前端学习——ionic/AngularJs——获取验证码倒计时按钮
Posted 糖粑粑
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习——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>
以上是关于前端学习——ionic/AngularJs——获取验证码倒计时按钮的主要内容,如果未能解决你的问题,请参考以下文章
Ionic+AngularJS 开发之『个人日常管理』App
Ionic+AngularJS 开发之『个人日常管理』App
使用 Ionic 2/AngularJS 显示 JSON 数据?
Ionic+AngularJS 开发之『个人日常管理』App