宜宾网站建设公司

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

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

创新互联是一家专业提供泰顺企业网站建设,专注与成都网站建设、做网站、H5建站、小程序制作等业务。10年已为泰顺众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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.页面上用方法中的变量来控制按钮的显示效果：

 
    
.....

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


本文名称：Angular6发送手机验证码按钮倒计时效果实现方法
URL标题：http://ybzwz.com/article/pgscph.html

其他资讯