首页 > 编程 > JavaScript > 正文

Angular6 发送手机验证码按钮倒计时效果实现方法

2019-11-19 12:18:46
字体:
来源:转载
供稿:网友

1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime):

countDown = false;countDowmTime = 60; // 这里设置倒计时为60SshowButtonText = '发送短信验证码'; // 可以控制动态改变的按钮提示信息

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表