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

Paul -
SioGabx Messages postés 311 Statut Membre - 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

Afficher la suite

A voir également:

Compteur html
Compteur électrique - Guide
Compteur de contractions - Télécharger - Santé & Bien-être
Editeur html - Télécharger - HTML
Logiciel remise à zéro compteur imprimante epson gratuit - Forum Imprimante
Espace en html ✓ - Forum HTML

1 réponse

Réponse 1 / 1

[Dal] Messages postés 6373 Statut Contributeur 1 106

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

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

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

[Dal] Messages postés 6373 Statut Contributeur 1 106

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 6373 Statut Contributeur

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 6373 Statut Contributeur 1 106

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

Votre réponse

Discussions similaires