Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(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)文章
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識資料,這里整理相關(guān)知識,及簡單示例代碼,有興趣的小伙伴可以參考下2016-09-09
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
利用Angular.js限制textarea輸入的字數(shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后,就可以開始創(chuàng)建第一個AngularJS應(yīng)用程序,這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字數(shù),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10
AngularJS基礎(chǔ) ng-cloak 指令簡單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡單的代碼實例及效果圖,學(xué)習(xí)AngularJS指令的朋友可以參考下2016-08-08
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07

