- 按钮点击之后，会禁用 disabled 为 true
- 同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改
- 里面的秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0，我们需要停止定时器，并且复原按钮的初始状态
原本使用的两个定时器（有点冗余了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信</title>
</head>
<body>
<form action="">
<input type="text" class="xzm">
<button type="submit" class="submit">发送</button>
</form>
<script>
var submit = document.querySelector('.submit');
console.log(submit);
submit.addEventListener('click', function() {
submit.disabled = true;
var count = 60;
downCount();
var timer1 = setInterval(downCount, 1000)
function downCount() {
submit.innerHTML = '还剩' + count + '秒';
count--;
}
var timer2 = setTimeout(function() {
clearInterval(timer1);
submit.disabled = false;
submit.innerHTML = '发送';
}, 60000)
})
</script>
</body>
</html>
改进了一下用一个计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信</title>
</head>
<body>
<form action="">
<input type="text" class="xzm">
<button type="submit" class="submit">发送</button>
</form>
<script>
var submit = document.querySelector('.submit');
console.log(submit);
submit.addEventListener('click', function() {
submit.disabled = true;
var count = 60;
downCount();
var timer1 = setInterval(downCount, 1000)
function downCount() {
submit.innerHTML = '还剩' + count + '秒';
count--;
if (count == 0) {
clearInterval(timer1);
submit.disabled = false;
submit.innerHTML = '发送';
}
}
})
</script>
</body>
</html>