按钮倒计时并禁用
1.输入手机号，点击按钮进行倒计时同时按钮禁用。
2.倒计时结束后，清除计时器，恢复对按钮能操作的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取验证码</title>
</head>
<body>
<input type="text" /> <button id="btn">获取验证码</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function() {
btn.disabled = true; // 当点击后倒计时时候不能点击此按钮
var time = 5; // 倒计时5秒
var timer = setInterval(countDown, 1000); // 设置定时器
// 倒计时
function countDown() {
time--;
if(time >= 0) {
btn.innerHTML = time + "s后重新发送";
} else {
btn.innerHTML = "重新发送";
btn.disabled = false; // 倒计时结束能够重新点击发送的按钮
clearTimeout(timer); // 清除定时器
time = 3; // 设置循环重新开始条件
}
}
}
</script>
</html>
