<p>我试图让这个倒计时在剩余时间中显示数字的图像。搞定了。我试图让它把这些数字放在一个图像上。终于搞定了。现在我试图让这些数字停止显示，并且将它们投影到一个剩余1天的图像上进行更改。失败了！我还希望它在倒计时达到结束日期时改变图像（在这种情况下是一个快乐的万圣节图像）。失败了！另外一件事是倒计时需要在第二天再次更改图像。这是我目前的情况。我甚至没有接近让图像改变。</p> <p><br /></p> <pre class="brush:js;toolbar:false;">function getImg(num) { var digits = String(num).split(""), text = ""; for (var i = 0; i &lt; digits.length; i++) { text += '&lt;img alt="' + digits[i] + '" src="https://okoutdoors.com/img/' + digits[i] + '.png" class="image2"/&gt;'; } return text; } CountDownTimer('10/31/2023 10:1 AM', 'countdown'); // CountDownTimer('02/20/2024 10:1 AM', 'newcountdown'); function CountDownTimer(dt, id) { var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance &lt; 0) { clearInterval(timer); document.getElementById(id).innerHTML = '已过期！'; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById(id).innerHTML = getImg(days) + ' ' /* + getImg(hours) + 'hrs ' + getImg(minutes) + 'mins ' + getImg(seconds) + 'secs'; */ } timer = setInterval(showRemaining, 1000); }</pre> <pre class="brush:css;toolbar:false;">body { background-color: black; color: yellow; } p { text-align: center; font-size: 40px; } h1.u-center { font-family: serif; display: block; font-size: 2em; margin-top: 0.10em; margin-bottom: 0.67em; text-align: center; text-decoration: underline; font-weight: bold; color: #254441; font-style: italic; } hr { display: block; text-align: center; width: 75%; border-style: inset; border-width: 2px; border-color: #ff5f04; } .parent { position: relative; top: 0; left: 0; } .responsive { max-width: 200px; width: 25%; height: auto; } .responsive1 { max-width: 400px; width: 40%; height: auto; } .container { position: relative; width: 100%; } .imageOne { width: 40%; transform: translate(74%, 00%); } .imageTwo { position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 13%; height: auto; } .image2 { max-width: 150px; width: 40%; height: auto; } .image3 { max-width: 400px; width: 100%; height: auto; } div.countdown { position: relative; display: block; }</pre> <pre class="brush:html;toolbar:false;">&lt;h1 class="u-center"&gt;Image Countdown&lt;/h1&gt; &lt;hr class="1"&gt; &lt;p align="center"&gt; &lt;img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="Happy"&gt; &lt;img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="Happy Halloween"&gt; &lt;img class="responsive" src="https://www.okoutdoors.com/img/catandmoonl.jpg" alt="Halloween"&gt; &lt;/p&gt; &lt;p align="center"&gt; &lt;img class="responsive1" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky"&gt; &lt;/p&gt; &lt;!-- &lt;div id="newcountdown"&gt;&lt;/div&gt; --&gt; &lt;div class="container"&gt; &lt;img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif"&gt; &lt;div class="imageTwo" id="countdown"&gt;&lt;/div&gt; &lt;/div&gt;</pre> <p><br /></p>

const countdown = document.querySelector('.countdown');

const numberToImgHtml = (n) => n.toString()
  .padStart(2, '0')
  .split('')
  .map(d => `<img alt="${d}" src="https://okoutdoors.com/img/${d}.png" />`)
  .join('');

CountDownTimer(countdown, '2023-10-31T00:00:00Z');

function CountDownTimer(el, targetTimestamp) {
  const endDate = new Date(targetTimestamp);
  
  const daysEl = el.querySelector('[data-unit="days"]');
  const hoursEl = el.querySelector('[data-unit="hours"]');
  const minutesEl = el.querySelector('[data-unit="minutes"]');
  const secondsEl = el.querySelector('[data-unit="seconds"]');

  const _second = 1000;
  const _minute = _second * 60;
  const _hour = _minute * 60;
  const _day = _hour * 24;
  let intervalId;

  function showRemaining() {
    const delta = endDate - new Date();
    if (delta < 0) {
      clearInterval(intervalId);
      el.innerHTML = 'EXPIRED!';
      return;
    }
    const days = Math.floor(delta / _day);
    const hours = Math.floor((delta % _day) / _hour);
    const minutes = Math.floor((delta % _hour) / _minute);
    const seconds = Math.floor((delta % _minute) / _second);
        
    daysEl.innerHTML = numberToImgHtml(days);
    hoursEl.innerHTML = numberToImgHtml(hours);
    minutesEl.innerHTML = numberToImgHtml(minutes);
    secondsEl.innerHTML = numberToImgHtml(seconds);
  }

  showRemaining();
  intervalId = setInterval(showRemaining, 1000);
}

html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-image: url(https://okoutdoors.com/img/halloween-before.gif);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.unit {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="countdown">
  <div class="unit" data-unit="days"></div>
  <div class="unit" data-unit="hours"></div>
  <div class="unit" data-unit="minutes"></div>
  <div class="unit" data-unit="seconds"></div>
</div>