How to change the image in the countdown

Question

I'm trying to make this countdown display an image of the numbers in the remaining time. nailed it. I'm trying to get it to put these numbers on an image. Finally got it done. Now I'm trying to get the numbers to stop showing and project them onto an image with 1 day left to change. Failed! I also want it to change the image when the countdown reaches the end date (in this case a happy halloween image). Failed! Another thing is that the countdown needs to change the image again the next day. This is my current situation. I'm not even close to getting the image to change.

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');
//  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 < 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);
}

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;
}

<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 id="newcountdown"></div> -->

<div class="container">
  <img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
  <div class="imageTwo" id="countdown"></div>
</div>

Answer 1

You can use classes and data attributes instead of hardcoded IDs.

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>