如何更改倒计时中的图像

Question

<p>我试图让这个倒计时在剩余时间中显示数字的图像。搞定了。我试图让它把这些数字放在一个图像上。终于搞定了。现在我试图让这些数字停止显示，并且将它们投影到一个剩余1天的图像上进行更改。失败了！我还希望它在倒计时达到结束日期时改变图像（在这种情况下是一个快乐的万圣节图像）。失败了！另外一件事是倒计时需要在第二天再次更改图像。这是我目前的情况。我什至没有接近让图像改变。</p> <p><br />></p>

function getImg(num) {
  var 数字 = String(num).split(""),
    文本=“”；
  for (var i = 0; i  ;';
  }
  返回文本；
}

CountDownTimer('10/31/2023 10:1 AM', '倒计时');
// CountDownTimer('02/20/2024 10:1 AM', 'newcountdown');

函数 CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _分钟 = _秒 * 60;
  var _小时 = _分钟 * 60;
  var _day = _hour * 24;
  变量定时器；

  函数显示剩余（）{
    var now = new Date();
    var距离=结束-现在；
    如果（距离<0）{

      清除间隔（计时器）；
      document.getElementById(id).innerHTML = '已过渡！';

      返回;
    }
    var days = Math.floor(距离 / _day);
    var 小时 = Math.floor((距离 % _day) / _hour);
    var 分钟 = Math.floor((距离 % _小时) / _分钟);
    var 秒 = Math.floor((距离 % _分钟) / _秒);

    document.getElementById(id).innerHTML = getImg(天) + ' '
    /* + getImg(小时) + '小时'     
                 + getImg(分钟) + '分钟'  
                 + getImg(秒) + '秒';  */
  }

  计时器 = setInterval(showRemaining, 1000);
}</pre>
body {
  背景颜色：黑色；
  颜色: 黄色;
}

p {
  文本对齐：居中；
  字体大小：40px；
}

h1.u-中心{
  字体系列：衬线体；
  显示：块；
  字体大小：2em；
  顶部边距：0.10em；
  边距-底部：0.67em；
  文本对齐：居中；
  文本装饰：下划线；
  字体粗细：粗体；
  颜色：#254441；
  字体样式：斜体；
}

小时{
  显示：块；
  文本对齐：居中；
  宽度：75%；
  边框样式：内嵌；
  边框宽度：2px；
  边框颜色：#ff5f04；
}

.父级{
  位置：相对；
  顶部：0；
  左：0；
}

.响应式{
  最大宽度：200px；
  宽度：25%；
  高度：自动；
}

.responsive1 {
  最大宽度：400px；
  宽度：40%；
  高度：自动；
}

。容器 {
  位置：相对；
  宽度：100%；
}

.imageOne {
  宽度：40%；
  变换：翻译（74%，00%）；
}

.imageTwo {
  位置：绝对；
  顶部：50%；
  左：50%；
  变换：翻译（-40%，-50%）；
  宽度：13%；
  高度：自动；
}

.image2 {
  最大宽度：150px；
  宽度：40%；
  高度：自动；
}

.image3 {
  最大宽度：400px；
  宽度：100%；
  高度：自动；
}

div.倒计时 {
  位置：相对；
  显示：块；
}</pre>
图像倒计时

<hr class="1">

<p 对齐=“中心”>
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="快乐">
  <img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="万圣节快乐">
  ;
</p>

<p 对齐=“中心”>
  <img class="responsive1" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky">
</p>




  <img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
  <div class="imageTwo" id="countdown"></div>
</div></pre>
<p><br />></p>
P粉668113768545 天前582 

Answer 1

您可以使用类和数据属性而不是硬编码的ID。

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>