1.界面:首先要有一个文本框,旁边是按钮,点击时开始倒计时。
2.点击按钮后倒计时结束前无法继续点击按钮。
3.倒计时结束后,清除计时器,恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS重新提交倒计时</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(ountDown, 1000); //设置定时器
// 倒计时
function ountDown() {
time--;
if(time >= 0) {
btn.innerHTML = time + "s后重新发送";
} else {
btn.innerHTML = "重新发送";
btn.disabled = false; //倒计时结束能够重新点击发送的按钮
clearTimeout(timer); //清除定时器
time = 5; //设置循环重新开始条件
}
}
}
</script>
</html>