好资源导航 » 文章资讯 » Angular6 发送手机验证码按钮倒计时效果实现方法

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

2023-09-01 18:56:05 56

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）';//验证码发送后的初始状态
conststart=setInterval(()=>{
if(this.countDownTime>=0){
this.showButtonText='验证码已发送('+this.countDownTime--+'s)';//动态的进行倒计时
}else{
clearInterval(start);//如果超时则重新发送
this.showButtonText='重新发送'；
this.countDown=false;//按钮再次变成可点击状态
this.countDownTime=60;
}
},1000);
}

3.页面上用方法中的变量来控制按钮的显示效果：


{{showButtonText}}
.....

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐