Comment changer l'image dans le compte à rebours-Questions et réponses sur le réseau chinois PHP

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 += ' ;'; } 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); } 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; } Compte à rebours d'images

const countdown = document.querySelector('.countdown'); const numberToImgHtml = (n) => n.toString() .padStart(2, '0') .split('') .map(d => ` ${d}

`) .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; }