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)證碼'; // 可以控制動態(tài)改變的按鈕提示信息
2.寫一個(gè)獲取短信驗(yàn)證碼的方法綁定到頁面的獲取短信驗(yàn)證碼按鈕上:
getCode(event) { this.validateForm1.controls['phone'].markAsDirty(); // 點(diǎn)擊獲取驗(yàn)證碼要以輸入了手機(jī)號為前提 this.validateForm1.controls['phone'].updateValueAndValidity(); this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{ // 如果手機(jī)號驗(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)'; // 動態(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法
- 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)文章
angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce)
這篇文章主要介紹了angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例(debounce),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01AngularJS基礎(chǔ) ng-open 指令簡單實(shí)例
本文主要介紹AngularJS ng-open 指令,這里幫大家整理了ng-open指令的基本資料,有需要的小伙伴可以參考下2016-08-08如何在Angular應(yīng)用中創(chuàng)建包含組件方法示例
這篇文章主要給大家介紹了關(guān)于如何在Angular應(yīng)用中創(chuàng)建包含組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
這篇文章主要介紹了Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法,需要的朋友可以參考下2017-10-10Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法分析
這篇文章主要介紹了Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法,結(jié)合實(shí)例形式分析了3種常用的閃爍問題解決方法,需要的朋友可以參考下2016-08-08