ionic2--验证码倒计时

ionic2+angular4 触发button实现60秒倒计时:

效果:

ionic2--验证码倒计时ionic2--验证码倒计时ionic2--验证码倒计时

实现思路:

 点击按钮后开始倒计时,同时按钮不可点击。倒计时完成后显示重新获取验证码。

代码:

HTML:

<ion-content>
  <ion-item>
    <ion-label fixed>账号</ion-label>
    <ion-icon name="heart"></ion-icon>
    <ion-input type="text" placeholder="请输入账号" #username [(ngModel)]="user.username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label fixed>验证码</ion-label>
    <ion-input type="password" placeholder="请输入验证码" #code></ion-input>
    <button item-right ion-button color="danger" medium (click)="getCode()" [disabled]="status">{{codeValue}}</button>
  </ion-item>
  <ion-item>
    <ion-label fixed>密码</ion-label>
    <ion-input type="password" placeholder="请输入密码" #password></ion-input>
  </ion-item>
  <ion-item no-lines>
    <label item-right (click)="login()">快速登陆</label>
    <!--<ion-toggle></ion-toggle>-->
  </ion-item>

  <div margin-left="10" margin-right="10">
    <button ion-button block color="primary" (click)="doRegister(username, password,code)">
      注册
    </button>
  </div>
</ion-content>


Component:

  private code :number;
  private status:boolean;
  getCode(){
    this.status=true;
    this.code=60;
     this.timer = setInterval(() => {
        this.code = this.code - 1;
      if(this.code>=0){
        this.codeValue=this.code+"";
      }else{
        this.codeValue='重新获取验证码';
        this.status=false;
        return;
      }
    
      }, 1000);
  }


结束!!!!