So ändern Sie das Bild im Countdown

Question

Ich versuche, diesen Countdown so zu gestalten, dass er ein Bild der Zahlen in der verbleibenden Zeit anzeigt. geschafft. Ich versuche, diese Zahlen auf ein Bild zu bringen. Endlich habe ich es geschafft. Jetzt versuche ich, die Zahlen nicht mehr anzuzeigen und sie auf ein Bild zu projizieren, wobei ich noch einen Tag Zeit habe, um sie zu ändern. Fehlgeschlagen! Ich möchte auch, dass sich das Bild ändert, wenn der Countdown das Enddatum erreicht (in diesem Fall ein fröhliches Halloween-Bild). Fehlgeschlagen! Eine andere Sache ist, dass der Countdown das Bild am nächsten Tag erneut ändern muss. Das ist meine aktuelle Situation. Ich bin noch nicht mal annähernd dabei, dass sich das Bild ändert.

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

CountDownTimer('31.10.2023 10:1 Uhr', 'Countdown');
// CountDownTimer('20.02.2024 10:1 Uhr', 'newcountdown');

Funktion CountDownTimer(dt, id) {
  var end = neues Datum(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  Var-Timer;

  Funktion showRemaining() {
    var now = neues Datum();
    var distance = end - now;
    if (Abstand < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'nicht verfügbar!';

      zurückkehren;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minuten = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = getImg(days) + ' '
    /* + getImg(hours) + 'hrs '     
                 + getImg(Minuten) + 'Minuten'  
                 + getImg(seconds) + 'secs';  */
  }

  timer = setInterval(showRemaining, 1000);
}

body {
  Hintergrundfarbe: schwarz;
  Farbe Gelb;
}

P {
  Textausrichtung: Mitte;
  Schriftgröße: 40px;
}

h1.u-center {
  Schriftfamilie: Serif;
  Bildschirmsperre;
  Schriftgröße: 2em;
  Rand oben: 0,10em;
  Rand unten: 0,67em;
  Textausrichtung: Mitte;
  Textdekoration: unterstreichen;
  Schriftdicke: fett;
  Farbe: #254441;
  Schriftstil: kursiv;
}

Std. {
  Bildschirmsperre;
  Textausrichtung: Mitte;
  Breite: 75 %;
  Randstil: eingefügt;
  Randbreite: 2px;
  Rahmenfarbe: #ff5f04;
}

.parent {
  Position: relativ;
  oben: 0;
  links: 0;
}

.responsive {
  maximale Breite: 200 Pixel;
  Breite: 25 %;
  Höhe: automatisch;
}

.responsive1 {
  maximale Breite: 400 Pixel;
  Breite: 40 %;
  Höhe: automatisch;
}

.container {
  Position: relativ;
  Breite: 100 %;
}

.imageOne {
  Breite: 40 %;
  transform: Translate(74%, 00%);
}

.imageTwo {
  Position: absolut;
  oben: 50 %;
  links: 50 %;
  transform: Translate(-40%, -50%);
  Breite: 13 %;
  Höhe: automatisch;
}

.image2 {
  maximale Breite: 150 Pixel;
  Breite: 40 %;
  Höhe: automatisch;
}

.image3 {
  maximale Breite: 400 Pixel;
  Breite: 100 %;
  Höhe: automatisch;
}

div.countdown {
  Position: relativ;
  Bildschirmsperre;
}

<h1 class="u-center">Bild-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="Fröhliches 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

您可以使用类和数据属性而不是硬编码的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>