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

- - Dernière réponse : SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
- 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 

1 réponse

Messages postés
5217
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
20 septembre 2019
801
0
Merci
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
J'ai trouver mais il m'affiche -285 jour etc... comment je fais pour enlever les "-" ?
[Dal]
Messages postés
5217
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
20 septembre 2019
801 -
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>
> [Dal]
Messages postés
5217
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
20 septembre 2019
-
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
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > Paul -
var nombredemoisecoule = 18;
var nombredanneecoule = 1
var nbrdannexnbroisdansanne = nombredanneecoule*12;
var nbrdemoisaafficher = nombredemoisecoule - nbrdannexnbroisdansanne;
console.log(nbrdemoisaafficher);
//affiche 6


N'oublie pas de cliquer sur "Merci" et de mettre en résolu si ça t'as aidé ;)
[Dal]
Messages postés
5217
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
20 septembre 2019
801 -
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/
Commenter la réponse de [Dal]