Comment changer l'image dans le compte à rebours

Question

J'essaie de faire en sorte que ce compte à rebours affiche une image des chiffres du temps restant. j'y suis arrivé. J'essaie de lui faire mettre ces chiffres sur une image. J'ai enfin réussi. Maintenant, j'essaie de faire en sorte que les chiffres cessent de s'afficher et de les projeter sur une image avec 1 jour pour changer. Échoué! Je souhaite également qu'il change l'image lorsque le compte à rebours atteint la date de fin (dans ce cas, une image de joyeux Halloween). Échoué! Une autre chose est que le compte à rebours doit à nouveau changer l'image le lendemain. C'est ma situation actuelle. Je ne suis même pas près de faire changer l'image.

fonction getImg(num) {
  var chiffres = String(num).split(""),
    texte = "" ;
  pour (var i = 0; i < digits.length; i++) {
    texte += '<img alt="' + chiffres[i] + '" src="https://okoutdoors.com/img/' + chiffres[i] + '.png" class="image2"/> ;';
  }
  renvoyer du texte ;
}

CountDownTimer('31/10/2023 10:1', 'compte à rebours');
// CountDownTimer('20/02/2024 10:1', 'nouveau compte à rebours');

fonction CountDownTimer (dt, id) {
  var fin = nouvelle Date(dt);

  var _seconde = 1000 ;
  var _minute = _seconde * 60 ;
  var _heure = _minute * 60 ;
  var _jour = _heure * 24 ;
  minuterie variable ;

  fonction showRemaining() {
    var maintenant = new Date();
    var distance = fin - maintenant ;
    si (distance < 0) {

      clearInterval (minuterie);
      document.getElementById(id).innerHTML = '已过期！';

      retour;
    }
    var jours = Math.floor(distance / _day);
    var heures = Math.floor((distance % _jour) / _heure);
    var minutes = Math.floor((distance % _heure) / _minute);
    var secondes = Math.floor((distance % _minute) / _seconde);

    document.getElementById(id).innerHTML = getImg(jours) + ' '
    /* + getImg(heures) + 'heures'     
                 + getImg(minutes) + 'minutes'  
                 + getImg(secondes) + 'secs';  */
  }

  minuterie = setInterval(showRemaining, 1000);
}</pré>
<pre class="brush:css;toolbar:false;">body {
  couleur de fond : noir ;
  Couleur jaune;
}

p{
  alignement du texte : centre ;
  taille de police : 40 px ;
}

h1.u-centre {
  famille de polices : serif ;
  bloc de visualisation;
  taille de police : 2em ;
  marge supérieure : 0,10 em ;
  marge inférieure : 0,67em ;
  alignement du texte : centre ;
  décoration de texte : souligner ;
  poids de la police : gras ;
  couleur : #254441 ;
  style de police : italique ;
}

heure {
  bloc de visualisation;
  alignement du texte : centre ;
  largeur : 75 % ;
  style de bordure : encart ;
  largeur de bordure : 2 px ;
  couleur de la bordure : #ff5f04 ;
}

.parent {
  position : relative ;
  haut : 0 ;
  gauche : 0 ;
}

.responsive {
  largeur maximale : 200 px ;
  largeur : 25 % ;
  hauteur : automatique ;
}

.responsive1 {
  largeur maximale : 400 px ;
  largeur : 40 % ;
  hauteur : automatique ;
}

.récipient {
  position : relative ;
  largeur : 100 % ;
}

.imageOne {
  largeur : 40 % ;
  transformer : traduire (74 %, 00 %);
}

.imageDeux {
  position : absolue ;
  haut : 50 % ;
  gauche : 50 % ;
  transformer : traduire (-40 %, -50 %);
  largeur : 13 % ;
  hauteur : automatique ;
}

.image2 {
  largeur maximale : 150 px ;
  largeur : 40 % ;
  hauteur : automatique ;
}

.image3 {
  largeur maximale : 400 px ;
  largeur : 100 % ;
  hauteur : automatique ;
}

div.compte à rebours {
  position : relative ;
  bloc de visualisation;
}</pré>
<pre class="brush:html;toolbar:false;"><h1 class="u-center">Compte à rebours d'images</h1>

<hr class="1">

<p align="centre">
  <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="Joyeux Halloween">
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonl.jpg" alt="Halloween">
</p>

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

<!-- <div id="newcountdown"></div> --->

<div class="conteneur">
  <img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
  <div class="imageTwo" id="compte à rebours"></div>
</div>

Answer 1

Vous pouvez utiliser des classes et des attributs de données au lieu d'identifiants codés en dur.

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>