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 = "获取验证码";
public isReGetCode: boolean = false; // 是否是重新获取验证码
public disabled: boolean = false; // 是否设置禁用
private timer;
constructor(public navCtrl: NavController) {
}
/**
* 获取验证码
*/
getIdCode() {
this.isReGetCode = true;
this.disabled = true;
if (this.countdown == 0) {
this.countdown = this.wait;
if (!this.isReGetCode) {
this.timeValue = "获取验证码";
} else {
this.timeValue = "重新获取";
}
this.disabled = false;
if (this.timer){
clearTimeout(this.timer);
}
return;
} else {
this.timeValue = "重新发送 (" + this.countdown + ")";
this.countdown--;
}
//过1秒后执行倒计时函数
this.timer = setTimeout(()=>this.getIdCode(),1000);
}
}
获取验证码倒计时
