Creer un compteur de nombre de Jours/Minutes/min HTML
Paul
-
SioGabx Messages postés 260 Date d'inscription Statut Membre Dernière intervention -
SioGabx Messages postés 260 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerais créer un compteur de jours (qui affiche aussi les minutes et à voir les secondes) entres deux dates, Je voudrais faire un compteur en temps réel comme les compteur d'abonnés YouTube. Ce serait comme un compte a rebours mais dans le sens inverse.
Je ne m'y connais absolument pas en HTML ou quoi que ce soit, donc ce serait savoir si quelqu’un peut m'envoyer un code déjà prédéfini ou alors m'expliquer comment faire et je vais essayer d'apprendre comment faire.
Merci beaucoup
J'aimerais créer un compteur de jours (qui affiche aussi les minutes et à voir les secondes) entres deux dates, Je voudrais faire un compteur en temps réel comme les compteur d'abonnés YouTube. Ce serait comme un compte a rebours mais dans le sens inverse.
Je ne m'y connais absolument pas en HTML ou quoi que ce soit, donc ce serait savoir si quelqu’un peut m'envoyer un code déjà prédéfini ou alors m'expliquer comment faire et je vais essayer d'apprendre comment faire.
Merci beaucoup
Configuration: Windows / Firefox 68.0
1 réponse
-
Salut,
https://www.w3schools.com/howto/howto_js_countdown.asp
montre comment faire un compte à rebours en utilisant la date et heure actuelle et une date et heure futures.
Dal-
-
-
On peut alors adapter le JavaScript en calculant des valeurs absolues pour éviter les nombres négatifs, en stockant le décompte dans une variable et en ajoutant en texte différent à l'affichage selon que la date est passée ou à venir.
par exemple, sur la base du code de w3schools :
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { text-align: center; font-size: 60px; margin-top: 0px; } </style> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("Jan 5, 2001 15:37:25").getTime(); // Update the count down every 1 second 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.abs(Math.floor(distance / (1000 * 60 * 60 * 24))); var hours = Math.abs(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))); var minutes = Math.abs(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))); var seconds = Math.abs(Math.floor((distance % (1000 * 60)) / 1000)); // Store the result in a variable var countdown = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (distance < 0) { document.getElementById("demo").innerHTML = "the date expired " + countdown + " ago"; } else { document.getElementById("demo").innerHTML = "the date will be in " + countdown; } }, 1000); </script> </body> -
Pour enlever les signes négatifs, j'avais juste a inverser les dates a comparer dans la soustraction xD c’était tout bête.
Maintenant je suis bloqué au moment de créer ma variable pour comptabiliser le nombre de mois (ex : 1 an et 6 mois), mon algorithme affiche 1 an et 18 mois. Donc ma question est, comment faire pour réinitialiser ma variable une fois qu'elle va atteindre 13 mois (à la fin de mon 12ème). Pour avoir des valeur allants de 0 à 12.
Merci de votre réponse.
Cordialement,
Paul -
C'est plus compliqué d'effectuer un décompte des mois ou des années que d'afficher des jours, des heures, minutes et secondes, qui ont des durées fixes.
Plutôt que de me lancer dans ces finesses, j'utiliserais probablement une bibliothèque de gestion de dates, qui aura réfléchi à implémenter tout cela correctement.
Par exemple :
- Moment.js : https://momentjs.com/
- ou date-fns : https://date-fns.org/
Par exemple, avec Moment.js on utiliserait ceci : https://momentjs.com/docs/#/displaying/fromnow/
-
