JavaScript 中有两种方法实现倒计时器：setInterval()：创建定时器，每隔指定毫秒重复调用函数。setTimeout()：仅调用一次函数，延迟指定时间。
JS中倒计时器的实现
在JavaScript中，有几种方法可以实现倒计时器。以下两种方法是常用的：
1. setInterval() 方法
setInterval() 方法创建一个定时器，它以指定的毫秒数重复调用一个函数。要使用 setInterval() 方法实现倒计时器，请按以下步骤操作：
- 定义一个函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
- 计算剩余时间的毫秒数。
- 使用
setInterval()方法每隔一定的毫秒数调用更新函数。 - 当倒计时结束时，清除 setInterval 定时器。
2. setTimeout() 方法
setTimeout() 方法仅调用一次函数，延迟指定的时间。要使用 setTimeout() 方法实现倒计时器，请按以下步骤操作：
- 定义一个递归函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
- 在函数中，计算剩余时间的毫秒数。
- 使用
setTimeout()方法在剩余时间后调用该函数。
示例代码 (setInterval() 方法)
function updateCountdown() {
const targetTime = new Date('2023-12-31');
const currentTime = new Date();
const msToTarget = targetTime - currentTime;
const msToHours = Math.floor(msToTarget / (1000 * 60 * 60));
const msToMinutes = Math.floor(msToTarget / (1000 * 60)) % 60;
const msToSeconds = Math.floor(msToTarget / 1000) % 60;
const countdownDisplay = document.getElementById('countdown');
countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
if (msToTarget <= 0) {
clearInterval(timeoutID);
}
}
const timeoutID = setInterval(updateCountdown, 1000);示例代码 (setTimeout() 方法)
function countdown(ms) {
const targetTime = Date.now() + ms;
const countdownDisplay = document.getElementById('countdown');
const update = () => {
const msRemaining = targetTime - Date.now();
if (msRemaining <= 0) {
return;
}
const msToHours = Math.floor(msRemaining / (1000 * 60 * 60));
const msToMinutes = Math.floor(msRemaining / (1000 * 60)) % 60;
const msToSeconds = Math.floor(msRemaining / 1000) % 60;
countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
setTimeout(update, 1000);
}
update();
}
countdown(3600000); // 1 小时 
