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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“Angular6 发送手机验证码按钮倒计时效果实现方法”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。