ionic 之 获取验证码

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);
  }
}

获取验证码倒计时