功能:点击获取验证码,开始倒计时,按钮不能点击,倒计时结束后,恢复原来的样子,可以继续点击。
html代码:
<div class="input-item">
<input type="text" name="verifiyCode" placeholder="短信验证码" maxlength="5">
<button class="getCode">获取验证码</button>
</div>
css代码:
.getCode {
position: absolute;
top: .5rem;
right: 0;
font-size: .34rem;
color: #fbb111;
background: none;
outline: none;
border: none;
}
.getCode:disabled {
color: #ccc;
}
javascript代码:
$(".getCode").on("click",function(){
time(this);
});
//验证码倒计时
var wait = 5;
function time(obj) {
if(wait==0) {
$(".getCode").removeAttr("disabled");
$(".getCode").text("获取验证码");
wait = 5;
}else {
$(".getCode").attr("disabled","true");
$(".getCode").text(wait+"秒后重试");
wait--;
setTimeout(function() { //倒计时方法
time(obj);
},1000); //间隔为1s
}
}
结果: