获取手机验证码倒计时功能

倒计时:

例如:登录页面获取手机验证码登录


代码:

/*
text:'获取验证码' => 按钮的初始展示样式是获取验证码
disabled:false,  => 是否禁用按钮 防止用户在短时间内多次点击
*/
<button @tap="getCode()" :disabled="disabled">{{text}}</button>
//点击事件
getCode(){
	this.disabled = true;
	let num = 60;
	this.text = `${num}s后重新获取`;
	let timer = setInterval(() => {
		num--;
		if(num > -1) {
			this.text = `${num}s后重新获取`;
		} else {
			clearInterval(timer);
			this.disabled = false;
			this.text = '验证码';
		}
	},1000)	
},

你可能感兴趣的:(uni-app,倒计时,获取验证码)