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

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

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

实现代码：

(1)js代码，设置成一个管理的以便多次调用。

angular.module('winwin ').指令(' timerbutton '，函数($timeout，$ interval){ return { restrict : ' AE '、scope: { showTimer: '='、timeout: '=' }、link:函数（作用域、元素、attrs){ scope。timer=falsescope.timeout=60000scope。计时器计数=范围。超时/1000；scope.text='获取验证码；范围。onclick=function(){ scope。show timer=truescope.timer=truescope.text='秒后重新获取；定义变量计数器=$ interval(function(){ scope。计时器计数=范围。计时器计数-1；}, 1000);$ time out(function(){ scope。文本='获取验证码；scope . timer=false $ interval . cancel(计数器);scope.showTimer=falsescope。计时器计数=范围。超时/1000；}，范围。超时)；} }，template : ' button on-tap=' OnClick()' class=' button button-calm xgmm-BTN ' ng-disabled=' timer ' span ng-if=' show timer ' { timer count } }/span { { text } }/button ' }；});(2)html代码

time rbbutton show-timer=' false '获取验证码/timerbutton实现效果：

(1)点击之前

(2)点击之后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。