1.组件中定义两个变量,分别用于控制按钮是否可以点击(countdown)和按钮上的倒计时数字(countdowntime):
countdown = false; countdowmtime = 60; // 这里设置倒计时为60s showbuttontext = '发送短信验证码'; // 可以控制动态改变的按钮提示信息
2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上:
getcode(event) { this.validateform1.controls['phone'].markasdirty(); // 点击获取验证码要以输入了手机号为前提 this.validateform1.controls['phone'].updatevalueandvalidity(); this.userprovider.dosendsms ({ phone: this.validateform1.controls.phone.value }).subscribe(res =>{ // 如果手机号验证通过 if (res) { this.notice.success('短信验证码已发送!'); this.sendmessage(); // 调用下面的按钮倒计时的方法 } }); } sendmessage() { // 发送了短信验证码后触发本方法,开始倒计时 this.countdown = true; // 发送验证码后一分钟内,按钮变成不可点击状态 this.showbuttontext = '验证码已发送(' +60+ 's)'; // 验证码发送后的初始状态 const start = setinterval(() = > { if (this.countdowntime >=0 ) { this.showbuttontext = '验证码已发送(' + this.countdowntime-- + 's)'; // 动态的进行倒计时 } else { clearinterval(start); // 如果超时则重新发送 this.showbuttontext = '重新发送'; this.countdown = false; // 按钮再次变成可点击状态 this.countdowntime = 60; } }, 1000); }
3.页面上用方法中的变量来控制按钮的显示效果:
<div style="text-align:center"> <button nz-button [disabled]="countdown" (click)="getcode($event)">{{showbuttontext}}</button> ..... </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论