案例一
function countDown(obj,second){
// 如果秒数还是大于0,则表示倒计时还没结束
if(second>=0){
// 获取默认按钮上的文字
if(typeof buttonDefaultValue === 'undefined' ){
buttonDefaultValue = obj.defaultValue;
}
// 按钮置为不可点击状态
obj.disabled = true;
// 按钮里的内容呈现倒计时状态
obj.value = buttonDefaultValue+'('+second+')';
// 时间减一
second--;
// 一秒后重复执行
setTimeout(function(){countDown(obj,second);},1000);
// 否则,按钮重置为初始状态
}else{
// 按钮置未可点击状态
obj.disabled = false;
// 按钮里的内容恢复初始状态
obj.value = buttonDefaultValue;
}
}
<input onclick="countDown(this,30);" type="button" value="发送短信" />
案例二
var secs = 10;
function countDown(ele){
if(secs == 0){
ele.removeAttribute("disabled");
ele.innerHTML="重新获取验证码";
secs = 10;
}else{
ele.setAttribute("disabled", true);
ele.innerHTML="重新发送(" + secs + ")";
secs--;
setTimeout(function(){
countDown(ele);
},1000)
}
}
<button type="button" id="btn3" onClick="countDown(btn3)" class="btn btn-primary">立即注册</button>