Angular6 發(fā)送手機(jī)驗(yàn)證碼按鈕倒計(jì)時(shí)效果實(shí)現(xiàn)方法
1.組件中定義兩個(gè)變量,分別用于控制按鈕是否可以點(diǎn)擊(countDown)和按鈕上的倒計(jì)時(shí)數(shù)字(countDownTime):
countDown = false; countDowmTime = 60; // 這里設(shè)置倒計(jì)時(shí)為60S showButtonText = '發(fā)送短信驗(yàn)證碼'; // 可以控制動(dòng)態(tài)改變的按鈕提示信息
2.寫一個(gè)獲取短信驗(yàn)證碼的方法綁定到頁面的獲取短信驗(yàn)證碼按鈕上:
getCode(event) {
this.validateForm1.controls['phone'].markAsDirty(); // 點(diǎn)擊獲取驗(yàn)證碼要以輸入了手機(jī)號(hào)為前提
this.validateForm1.controls['phone'].updateValueAndValidity();
this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{ // 如果手機(jī)號(hào)驗(yàn)證通過
if (res) {
this.notice.success('短信驗(yàn)證碼已發(fā)送!');
this.sendMessage(); // 調(diào)用下面的按鈕倒計(jì)時(shí)的方法
}
});
}
sendMessage() { // 發(fā)送了短信驗(yàn)證碼后觸發(fā)本方法,開始倒計(jì)時(shí)
this.countDown = true; // 發(fā)送驗(yàn)證碼后一分鐘內(nèi),按鈕變成不可點(diǎn)擊狀態(tài)
this.showButtonText = '驗(yàn)證碼已發(fā)送(' +60+ 's)'; // 驗(yàn)證碼發(fā)送后的初始狀態(tài)
const start = setInterval(() = > {
if (this.countDownTime >=0 ) {
this.showButtonText = '驗(yàn)證碼已發(fā)送(' + this.countDownTime-- + 's)'; // 動(dòng)態(tài)的進(jìn)行倒計(jì)時(shí)
} else {
clearInterval(start); // 如果超時(shí)則重新發(fā)送
this.showButtonText = '重新發(fā)送';
this.countDown = false; // 按鈕再次變成可點(diǎn)擊狀態(tài)
this.countDownTime = 60;
}
}, 1000);
}
3.頁面上用方法中的變量來控制按鈕的顯示效果:
<div style="text-align:center">
<button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button>
.....
</div>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡(jiǎn)單方法
- AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
- angular2倒計(jì)時(shí)組件使用詳解
- AngularJs 延時(shí)器、計(jì)時(shí)器實(shí)例代碼
- ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
- AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
- Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
- Angular2實(shí)現(xiàn)的秒表及改良版示例
相關(guān)文章
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識(shí)資料,這里整理相關(guān)知識(shí),及簡(jiǎn)單示例代碼,有興趣的小伙伴可以參考下2016-09-09
使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進(jìn)階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法
今天小編就為大家分享一篇Angularjs Ng_repeat中實(shí)現(xiàn)復(fù)選框選中并顯示不同的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識(shí)后,就可以開始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序,這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù),有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-10-10
AngularJS基礎(chǔ) ng-cloak 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-cloak 指令,這里幫大家整理了ng-clock指令的基礎(chǔ)資料,和簡(jiǎn)單的代碼實(shí)例及效果圖,學(xué)習(xí)AngularJS指令的朋友可以參考下2016-08-08
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07

