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
暂无“Angular6 发送手机验证码按钮倒计时效果实现方法”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《电台情歌-凌晨时分》2CD[低速原抓WAV]
- 许巍《试音天碟》人声测试天碟[WAV分轨][1G]
- 蔡琴《你不要那样看着我的眼睛》SACD版[低速原抓WAV+CUE][1G]
- 费玉清《一剪梅》24K金碟德国版[低速原抓WAV+CUE][1G]
- 宝可梦大集结国服什么时候上线 大集结国服上线时间一览
- 宝可梦大集结国服官网地址是什么 大集结官方网址一览
- 宝可梦大集结开服5选1礼包怎么选 新手5选1宝可梦推荐
- 劳斯莱斯女车主丈夫坦言拒赔原因:确实有流量因素
- 《心灵杀手2》PS5 Pro实机演示:质量模式4K 30帧
- 玩家分享买二手盘暖心经历:盘上还有小贴纸表达感谢
- 殷秀梅.2014-沁园春·雪【太平洋影音】【WAV+CUE】
- 范玮琪.2003-真善美【福茂】【WAV+CUE】
- 陈雷.1995-烧翻卖【金圆唱片】【WAV+CUE】
- 乱石堆中一粒砂金——《使命召唤21》评测
- 【果娘聊天室】双11即将结束,各位今年买了啥?