JavaScript 日期倒计时案例 - 计算距离指定日期的时间

以下是一个日期倒计时的 JavaScript 案例：

HTML：

<div id='countdown'>
  <div class='countdown-item'>
    <span id='days'></span>
    <p>Days</p>
  </div>
  <div class='countdown-item'>
    <span id='hours'></span>
    <p>Hours</p>
  </div>
  <div class='countdown-item'>
    <span id='minutes'></span>
    <p>Minutes</p>
  </div>
  <div class='countdown-item'>
    <span id='seconds'></span>
    <p>Seconds</p>
  </div>
</div>

CSS：

#countdown {
  display: flex;
  justify-content: center;
}

.countdown-item {
  margin: 0 10px;
  text-align: center;
  font-size: 30px;
}

.countdown-item p {
  margin-top: 10px;
  font-size: 16px;
}

JavaScript：

// 设置倒计时目标日期
var countDownDate = new Date('Jan 1, 2022 00:00:00').getTime();

// 每 1 秒更新一次倒计时
var x = setInterval(function() {

  // 获取当前日期和时间
  var now = new Date().getTime();
  
  // 计算当前时间距离目标日期的剩余时间
  var distance = countDownDate - now;
  
  // 计算天数、小时数、分钟数和秒数
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  // 将结果显示在 id 为 'countdown' 的元素中
  document.getElementById('days').innerHTML = days;
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
  
  // 如果倒计时结束，显示文本
  if (distance < 0) {
    clearInterval(x);
    document.getElementById('countdown').innerHTML = 'Happy New Year!';
  }
}, 1000);

这个案例将在页面上创建一个日期倒计时，以计算距离 2022 年 1 月 1 日的天数、小时数、分钟数和秒数。如果倒计时结束，它将显示“Happy New Year!”。