js 验证码倒计时按钮

按钮部分：

<button type="button" onclick="getCode(this)">获取验证码</button>

　　

js部分：

<script>
var t;
var countdown = 0;
function getCode(th) {
if (countdown == 0) {
th.setAttribute("disabled",false);
th.innerHTML = "获取验证码";
countdown = 10;
alert("现在是10")
} else {
th.setAttribute("disabled", false);
th.innerHTML = "重新发送(" + countdown + "s)";
countdown--;
}
t=setTimeout(function () {getCode(th)}, 1000);
if ( countdown==0){
clearTimeout(t)
th.removeAttribute("disabled");
th.innerHTML = "获取验证码";
}
}
</script>

 

原理:

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 js来删除 disabled 值，将 input 元素的值切换为可用。

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种：

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
removeAttribute() 方法删除指定的属性。