Creer un compteur de nombre de Jours/Minutes/min HTML

Fermé

Paul - 26 août 2019 à 10:56
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 - 30 août 2019 à 10:19

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

Configuration: Windows / Firefox 68.0

A voir également:

Compteur html
Compteur électrique - Guide
Comment ralentir un compteur linky forum - Accueil - Objets connectés
Compteur communicant - Guide
Compteur de contractions - Télécharger - Santé & Bien-être
Editeur html - Télécharger - HTML

1 réponse

Réponse 1 / 1

[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 100
26 août 2019 à 13:36

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

Paul
26 août 2019 à 14:01

Merci pour ta réponse, juste quand je rentre une date qui est déjà passée le compteur me note que le compte a expiré ce qui est normal. Comment je fais pour qu'il m'affiche le nombre de temps écoulé depuis le dépassement de cette date ?

Paul > Paul
26 août 2019 à 14:05

J'ai trouver mais il m'affiche -285 jour etc... comment je fais pour enlever les "-" ?

[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 100
26 août 2019 à 14:13

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>

Paul > [Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025
Modifié le 29 août 2019 à 22:58

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

[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 100
Modifié le 30 août 2019 à 10:09

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/

Discussions similaires

la balise ou

ou ou

remise a zero compteur epson

Balise

Saut de lignes sans