JS实现时分秒倒计时

实现思路

实现时分秒倒计时的基本思路如下：

1. 获取倒计时结束时间并转换为时间戳
2. 获取当前时间并转换为时间戳
3. 计算差值并转换为时分秒格式
4. 输出倒计时结果
5. 启动定时器，每秒钟更新一次倒计时结果

代码实现

// 获取元素
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');

// 倒计时时间
const countdownDate = new Date('2022-01-01').getTime();

// 更新倒计时
function updateCountdown() {
  const now = new Date().getTime();
  const distance = countdownDate - now;

  // 计算时分秒
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 输出倒计时
  daysEl.innerHTML = days;
  hoursEl.innerHTML = hours < 10 ? '0' + hours : hours;
  minutesEl.innerHTML = minutes < 10 ? '0' + minutes : minutes;
  secondsEl.innerHTML = seconds < 10 ? '0' + seconds : seconds;
}

// 初始加载
updateCountdown();

// 启动定时器
setInterval(updateCountdown, 1000);

示例说明

示例1

<!-- HTML -->
<p>距离2022年元旦还有：</p>
<ul>
  <li><span id="days"></span> 天</li>
  <li><span id="hours"></span> 时</li>
  <li><span id="minutes"></span> 分</li>
  <li><span id="seconds"></span> 秒</li>
</ul>

在该示例中，HTML代码中使用了四个span标签来分别表示倒计时的天数、小时数、分钟数和秒数。在JS中，我们通过获取这四个元素，然后启动定时器来不断更新倒计时的结果。

示例2

<!-- HTML -->
<p>距离2022年元旦还有：<span id="countdown"></span></p>

在该示例中，我们仅使用了一个span标签来表示倒计时，而不是使用多个span标签来分别表示天数、小时数、分钟数和秒数。在JS中，我们通过获取该元素，然后不断更新该元素的innerHTML来显示倒计时的结果。