功能：點擊獲取驗證碼，開始倒計時，按鈕不能點擊，倒計時結(jié)束后，恢復(fù)原來的樣子，可以繼續(xù)點擊。

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} }

結(jié)果：

總結(jié)

以上是生活随笔為你收集整理的短信验证码倒计时代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。