功能:點擊獲取驗證碼,開始倒計時,按鈕不能點擊,倒計時結束後,恢復原來的樣子,可以繼續點擊。
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
}
}
結果: