- 按鈕點擊之後，會禁用 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>