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);
}
结束!!!!