使用JQuery做一个点击按钮倒计时的效果;
先给大家看一下最终的效果,
图一:按钮可点击,
图二:按钮不可点击,并更改button的html()
按钮Html代码如下:
<button type="button" class="ui_btn ui_org_btn" id="tel_btn"
style="height: 43px">获取验证码</button>
js代码如下:
// 发送验证码倒计时60s
$(function() {
var btn = $("#tel_btn");
$(function() {
btn.click(settime);
})
var countdown = 5;//倒计时总时间,为了演示效果,设为5秒,一般都是60s
function settime() {
if (countdown == 0) {
btn.attr("disabled", false);
btn.html("获取验证码");
btn.removeClass("disabled");
countdown = 5;
return;
} else {
btn.addClass("disabled");
btn.attr("disabled", true);
btn.html("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(settime, 1000);
}
})