ionic2--验证码倒计时

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

效果：

实现思路：

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

代码：

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

  }

结束！！！！