如何实现倒计时不同阶段的背景图切换与数字显示控制

我们通过判断倒计时的不同阶段，分别控制背景图切换和数字显示，以下是修改后的完整代码：

1. HTML 修改 #

给背景图添加id，方便JS获取和修改：

<h1 class="u-center">Image Countdown</h1>

<hr class="1">

<p align="center">
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="Happy">
  <img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="Happy Halloween">
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonl.jpg" alt="Halloween">
</p>

<p align="center">
  <img class="responsive1" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky">
</p>

<div class="container">
  <!-- 添加id="bgImage"便于JS操作 -->
  <img id="bgImage" class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
  <div class="imageTwo" id="countdown"></div>
</div>

2. JavaScript 修改 #

新增阶段判断逻辑，处理三种需求场景：

function getImg(num) {
  var digits = String(num).split(""),
    text = "";
  for (var i = 0; i < digits.length; i++) {
    text += '<img alt="' + digits[i] + '" src="https://okoutdoors.com/img/' + digits[i] + '.png" class="image2"/>';
  }
  return text;
}

CountDownTimer('10/31/2023 10:1 AM', 'countdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);
  var bgImage = document.getElementById('bgImage');
  var countdownEl = document.getElementById(id);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  // 计算结束日期的当天0点和次日0点，用于判断阶段
  const endDateStart = new Date(end.getFullYear(), end.getMonth(), end.getDate());
  const endNextDayStart = new Date(endDateStart);
  endNextDayStart.setDate(endNextDayStart.getDate() + 1);

  function showRemaining() {
    var now = new Date();
    var distance = end - now;

    // 处理倒计时结束后的场景
    if (distance < 0) {
      clearInterval(timer);
      countdownEl.innerHTML = '';
      // 判断当前是结束当天还是次日及以后
      if (now >= endDateStart && now < endNextDayStart) {
        // 倒计时结束当天：切换万圣节快乐主题图
        bgImage.src = "https://okoutdoors.com/img/halloween-happy.jpg"; // 替换为你的万圣节快乐图地址
      } else {
        // 倒计时结束次日：切换目标图片
        bgImage.src = "https://okoutdoors.com/img/halloween-after.jpg"; // 替换为你的结束次日图地址
      }
      return;
    }

    var days = Math.floor(distance / _day);

    // 处理剩余1天的场景
    if (days === 1) {
      countdownEl.innerHTML = ''; // 停止显示数字
      bgImage.src = "https://okoutdoors.com/img/halloween-1day.jpg"; // 替换为剩余1天的背景图地址
    } else {
      // 正常显示剩余天数图片
      countdownEl.innerHTML = getImg(days) + ' ';
    }
  }

  timer = setInterval(showRemaining, 1000);
}

3. CSS 无需修改 #

保持原有CSS样式即可。

说明 #

• 请将代码中注释的图片地址占位符替换为你实际的图片URL
• 逻辑判断规则：
  • 剩余1天时：清空倒计时数字，切换对应背景图
  • 倒计时结束当天（从结束日期0点到次日0点）：切换万圣节快乐图，隐藏数字
  • 倒计时结束次日及以后：切换指定的后续图片，隐藏数字

内容的提问来源于stack exchange，提问作者trino98