11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Countdown Java 2 affichage 1 script

Bonjour à tous.
Bonne et heureuse année 2023.

J'ai dans une de mes page un Countdown javascript

//var countDownDate = new Date("Aug 30 2021 18:00").getTime();
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
// affichage complet 
  document.getElementById("count").innerHTML = days + "j " + hours + "h "  + minutes + "m " + seconds + "s ";

//affichage partiel
  document.getElementById("counth").innerHTML = hours + "h "  + minutes + "m " + seconds + "s ";
  
  if (days === 0 && hours === 0 && minutes === 00 && seconds === 00) {
   window.location.reload();
  }
  
  
}, 1000);

la var countDownDate est donnée par les pages

enfaite je cherche moyen d'avoir un affichage différent suivant les page certaine page peuvent avoir des jours de countdown d'autre c'est juste quelques heures

Le résultat
<p id="count" ></p>

confionne très bien mais pas le second
<p id="counth" ></p>


Ou je déconne?

J'ai aussi essayer ceci
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
  var distance1 = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  var hours1 = Math.floor((distance1 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes1 = Math.floor((distance1 % (1000 * 60 * 60)) / (1000 * 60));
  var seconds1 = Math.floor((distance1 % (1000 * 60)) / 1000);

  document.getElementById("count").innerHTML = days + "j " + hours + "h "  + minutes + "m " + seconds + "s ";

  document.getElementById("counth").innerHTML = hours1 + "h "  + minutes1 + "m " + seconds1 + "s ";

je comprend pas ma second ligne ne fonctionne pas!
Merci par avance de votre aide car je bloque la dessus depuis 2 semaine
Bonjour Mathieuu

Merci je pense a tester ailleur merci pour le lien.
la prochaine foi je test la-bas avant de poser une requette.

Pourtant sur mon site il ne saffiche pas donc je doit chercher l'erreur ailleur!

enfaite non cela affiche pas si je supprime le premier 

<p id="count"> </p>

Modifié par djmanu68 (12 Jan 2023 - 15:52)
Bon je me suis baser ce ce que tu as fait Matieuu

<p id="count" style='display:none;'></p>
<p id="counth"></p>


Au moins la l'affichage fonctionne

Merci pour l'aide
Ah oui c'est normal ça, si tu le fais sur le site du jsfiddle tu vas voir les erreurs pop dans la console à droite (et sinon dans le navigateur tu as généralement des outils développeur en faisant f12)
"<a class='gotoLine' href='#60:12'>60:12</a> TypeError: document.getElementById(...) is null"

Si tu n'as que l'un ou l'autre il faut que tu rajoutes un test pour être sur que l’élément existe avant d'essayer d'acceder à son innerHTML par exemple : 

if(document.getElementById("count"))
{
  document.getElementById("count").innerHTML = days + "j " + hours + "h "  + minutes + "m " + seconds + "s ";
}


Nouveau js : https://jsfiddle.net/v1st80gc/1/ et tu peux supprimer un des 2 divs

Edit : Je n'ai rien fait moi, j'ai juste copié ton code dans un jsfiddle
Modifié par Mathieuu (12 Jan 2023 - 16:19)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à