欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法

 更新時間：2019年01月08日 09:41:49   作者：燦燦大王  
這篇文章主要介紹了Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.組件中定義兩個變量，分別用于控制按鈕是否可以點擊（countDown）和按鈕上的倒計時數(shù)字（countDownTime）：

countDown = false;
countDowmTime = 60; // 這里設(shè)置倒計時為60S
showButtonText = '發(fā)送短信驗證碼'； // 可以控制動態(tài)改變的按鈕提示信息

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('短信驗證碼已發(fā)送！');
      this.sendMessage();   // 調(diào)用下面的按鈕倒計時的方法
 
        } 
       }); 
   }
 
sendMessage() {   // 發(fā)送了短信驗證碼后觸發(fā)本方法，開始倒計時 
  this.countDown = true;                // 發(fā)送驗證碼后一分鐘內(nèi)，按鈕變成不可點擊狀態(tài) 
  this.showButtonText = '驗證碼已發(fā)送（' +60+ 's）';           // 驗證碼發(fā)送后的初始狀態(tài) 
  const start = setInterval(() = > { 
     if (this.countDownTime >=0 ) {
        this.showButtonText = '驗證碼已發(fā)送(' + this.countDownTime-- + 's)';     // 動態(tài)的進行倒計時
         } else { 
             clearInterval(start);             // 如果超時則重新發(fā)送 
             this.showButtonText = '重新發(fā)送'； 
             this.countDown = false;         // 按鈕再次變成可點擊狀態(tài)
             this.countDownTime = 60; 
            } 
       }, 1000);
   }

3.頁面上用方法中的變量來控制按鈕的顯示效果：

<div style="text-align:center"> 
   <button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button> 
..... 
</div>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論