这篇文章主要介绍了Angular6 发送手机验证码按钮倒计时效果实现方法，小编觉得挺不错的，现在
来源gao!daima.com搞$代!码网
分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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>{{showButtonText}}</button> ..... </div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是Angular6 发送手机验证码按钮倒计时效果实现方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angular6 发送手机验证码按钮倒计时效果实现方法
转载请注明原文链接：Angular6 发送手机验证码按钮倒计时效果实现方法
