功能：點(diǎn)擊獲取驗(yàn)證碼，開(kāi)始倒計(jì)時(shí)，按鈕不能點(diǎn)擊，倒計(jì)時(shí)結(jié)束后，恢復(fù)原來(lái)的樣子，可以繼續(xù)點(diǎn)擊。

html代碼：

<div class="input-item"><input type="text" name="verifiyCode" placeholder="短信驗(yàn)證碼" maxlength="5"><button class="getCode">獲取驗(yàn)證碼</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); }); //驗(yàn)證碼倒計(jì)時(shí) var wait = 5; function time(obj) {if(wait==0) {$(".getCode").removeAttr("disabled");$(".getCode").text("獲取驗(yàn)證碼");wait = 5;}else {$(".getCode").attr("disabled","true");$(".getCode").text(wait+"秒后重試");wait--;setTimeout(function() { //倒計(jì)時(shí)方法time(obj);},1000); //間隔為1s} }

結(jié)果：

總結(jié)

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

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