html代碼
<button ion-button clear [disabled]="disabled" (click)="getIdCode()">
{{timeValue}}
</button>
css代碼
button{
color: white !important;
background-color: orange!important;
}
button[disabled] {
color: #222222 !important;
opacity:0.5 !important;
background-color: #eee!important;
}
js代碼
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
private wait: number = 3;
public countdown: number = this.wait;
public timeValue = "獲取驗(yàn)證碼";
public isReGetCode: boolean = false; // 是否是重新獲取驗(yàn)證碼
public disabled: boolean = false; // 是否設(shè)置禁用
private timer;
constructor(public navCtrl: NavController) {
}
/**
* 獲取驗(yàn)證碼
*/
getIdCode() {
this.isReGetCode = true;
this.disabled = true;
if (this.countdown == 0) {
this.countdown = this.wait;
if (!this.isReGetCode) {
this.timeValue = "獲取驗(yàn)證碼";
} else {
this.timeValue = "重新獲取";
}
this.disabled = false;
if (this.timer){
clearTimeout(this.timer);
}
return;
} else {
this.timeValue = "重新發(fā)送 (" + this.countdown + ")";
this.countdown--;
}
//過(guò)1秒后執(zhí)行倒計(jì)時(shí)函數(shù)
this.timer = setTimeout(()=>this.getIdCode(),1000);
}
}
獲取驗(yàn)證碼倒計(jì)時(shí)
