ionic2--验证码倒计时

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

效果：

实现思路：

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

代码：

HTML：

<ion-content>

  <ion-item>

    <ion-labelfixed>账号</ion-label>

    <ion-iconname="heart"></ion-icon>

    <ion-inputtype="text"placeholder="请输入账号" #username [(ngModel)]="user.username"></ion-input>

  </ion-item>

  <ion-item>

    <ion-labelfixed>验证码</ion-label>

    <ion-inputtype="password"placeholder="请输入验证码" #code></ion-input>

    <buttonitem-right ion-button color="danger"medium (click)="getCode()" [disabled]="status">{{codeValue}}</button>

  </ion-item>

  <ion-item>

    <ion-labelfixed>密码</ion-label>

    <ion-inputtype="password"placeholder="请输入密码" #password></ion-input>

  </ion-item>

  <ion-itemno-lines>

    <labelitem-right (click)="login()">快速登陆</label>

    <!--<ion-toggle></ion-toggle>-->

  </ion-item>

  <divmargin-left="10"margin-right="10">

    <buttonion-button block color="primary" (click)="doRegister(username, password,code)">

      注册

    </button>

  </div>

</ion-content>

Component：

  privatecode :number;

  privatestatus: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);

  }

结束！！！！