Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120037 Compte à rebours en JavaScript | | Compte à rebours en JavaScript Compte à rebours en JavaScript BaseNous allons commencer par créer dans un fichier .html une div avec un id compte_a_rebours, suivi de notre code JavaScript. On crée ensuite une variable pour sélectionner cette div. var compte_a_rebours = document.getElementById("compte_a_rebours"); Attention à bien mettre le code JavaScript après la div. En effet, vu que le JavaScript s'exécute en même temps que le chargement de la page, l'id compte_a_rebours n'existera encore pas.
Calculs du nombre de jours, heures, minutes et secondes
On crée une variable pour la date actuelle.var date_actuelle = new Date(); Puis celle pour l'évènement. Syntaxe : Mois Jour Heures:Minutes:Secondes Année. Attention à bien mettre le nom du mois en anglais, et ne garder que les 3 premières lettres.var date_evenement = new Date("Jan 1 00:00:00 2017"); Ici on choisit le 1 janvier 2017.
Voici comment nous allons procéder : On calcule la différence entre les deux dates (date_evenement - date_actuelle). Si la différence est strictement positive, le compte à rebours n'est pas terminé. Si la différence est nulle, alors le compte à rebours vient de se terminer à l'instant. Sinon (la différence est strictement négative), le compte à rebours est terminé. Dans ce cas-là, on calculera depuis combien de temps il est terminé. Les variables des deux dates sont en millisecondes. On fait donc une soustraction des deux dates, puis on les divise par 1000 afin d'avoir une différence en secondes.var total_secondes = (date_evenement - date_actuelle) / 1000; Pour différencier si le compte à rebours est terminé ou non, on va ajouter un préfixe, qui, en fonction de la différence, vaudra "Compte à rebours terminé dans " ou "Compte à rebours terminé il y a ". Dans le cas où la différence est négative, on modifiera la valeur de total_secondes pour lui mettre sa valeur absolue, afin que l'on puisse faire nos calculs plus tard correctement.
var prefixe = "Compte à rebours terminé dans "; if (total_secondes < 0) { prefixe = "Compte à rebours terminé il y a "; // On modifie le préfixe si la différence est négatif total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue } if (total_secondes > 0) { // A faire, tous nos calculs } else // Si total_secondes == 0 (puisque l'on a prit sa valeur absolue) { compte_a_rebours.innerHTML = 'Compte à rebours terminé.'; } Nous allons maintenant calculer le nombre de jours, d'heures, de minutes et de secondes restants.Le nombre étant en secondes, 1 jour = 60 x 60 x 24 secondes. La différence divisée par ce nombre nous donne le nombre de jours restants. On récupère alors le plus grand entier inférieur ou égal à la valeur retournée (on tronque à l'unité), afin de ne pas avoir 10.345 jours restants, mais 10. On utilise pour cela la fonction Math.floor().var jours = Math.floor(total_secondes / (60 * 60 * 24)); Passons aux heures restantes. Sur les 10.345 jours restants (par exemple), on n'a gardé seulement 10. Il reste donc 0.345 jour, que nous allons devoir convertir en heures. On soustrait donc aux secondes totales le nombre de jours (en secondes). Ça permet de récupérer les 0.345 jour (mais en secondes). Vu que 1 heure = 60 x 60 secondes, la différence divisée par ce nombre nous permet d'obtenir le nombre d'heures restantes. Pareil que pour les jours, on récupère le plus grand entier inférieur ou égal à la valeur retournée.var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60)); Mêmes techniques pour les minutes et les secondes :minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60); secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60))); AffichageIl nous reste plus qu'à afficher le résultat.compte_a_rebours.innerHTML = prefixe + jours + ' jours ' + heures + ' heures ' + minutes + ' minutes et ' + secondes + ' secondes.'; AméliorationsMaintenant, nous allons améliorer tout ça pour avoir un meilleur résultat. Si c'est 0 jour (ou 0 heure, ou 0 minute, ou 0 seconde), alors on ne les affiche pas. Exemple, s'il reste 0 jours, 3 heures, 0 minutes et 0 secondes, on n'affiche que 3 heures De plus, s'il reste 1 jour (ou heure, ou mi...), alors on enlève le s Modifier le script pour qu'il s'actualise toutes les secondes, cela évitera de recharger la page pour voir le temps restant Afficher un message d'erreur pour ceux qui n'ont pas leur JavaScript d'activéLes mots et "s" en trop
Pour résoudre les deux premiers points, on peut remplacer ceci :compte_a_rebours.innerHTML = prefixe + jours + ' jours ' + heures + ' heures ' + minutes + ' minutes et ' + secondes + ' secondes.'; Par :
var et = "et"; var mot_jour = "jours,"; var mot_heure = "heures,"; var mot_minute = "minutes,"; var mot_seconde = "secondes"; if (jours == 0) { jours = ''; mot_jour = ''; } else if (jours == 1) { mot_jour = "jour,"; } if (heures == 0) { heures = ''; mot_heure = ''; } else if (heures == 1) { mot_heure = "heure,"; } if (minutes == 0) { minutes = ''; mot_minute = ''; } else if (minutes == 1) { mot_minute = "minute,"; } if (secondes == 0) { secondes = ''; mot_seconde = ''; et = ''; } else if (secondes == 1) { mot_seconde = "seconde"; } if (minutes == 0 && heures == 0 && jours == 0) { et = ""; } compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde; Je pense qu'une simple lecture devrait vous permettre de comprendre ce code.
Ré-actualisation automatiqueMaintenant, passons à la ré-actualisation automatique du compte à rebours.
Pour cela, nous allons devoir englober notre code dans une fonction, que nous exécuterons toutes les secondes, grâce à la fonction setTimeout :
actualisation = setTimeout("compte_a_rebours();", 1000); Cette ligne aura pour action de lancer la fonction compte_a_rebours() dans 1000 millisecondes (donc dans une seconde). On l'ajoutant à la fin de notre fonction, celle-ci sera donc exécutée chaque seconde. Pour l'appeler la première fois, il nous suffit de la faire exécuter après l'avoir fait déclarer. On obtient :function compte_a_rebours() { // Code que l'on a écrit auparavant var actualisation = setTimeout("compte_a_rebours();", 1000); } compte_a_rebours(); Pour les utilisateurs n'ayant pas le JavaScript d'activé Une dernière petite amélioration consiste à afficher un message d'erreur si le JavaScript n'est pas activé.On remplace donc ceci : Par :Merci d'activer votre JavaScript. La balise noscript n'affiche son contenu seulement si le JavaScript est désactivé.
Vous pouvez aussi, au lieu d'afficher ce message d'erreur pas toujours très agréable, afficher un texte manuellement pour dire quand ce termine le compte à rebours :
Fin de l'évènement le 1er janvier 2017. Codes completsEt voilà ! Tout devrait fonctionner. - Code:
-
<div id="compte_a_rebours"><noscript>Fin de l'évènement le 1er janvier 2017.</noscript></div> <script type="text/javascript"> function compte_a_rebours() { var compte_a_rebours = document.getElementById("compte_a_rebours");
var date_actuelle = new Date(); var date_evenement = new Date("Jan 1 00:00:00 2017"); var total_secondes = (date_evenement - date_actuelle) / 1000;
var prefixe = "Compte à rebours terminé dans "; if (total_secondes < 0) { prefixe = "Compte à rebours terminé il y a "; // On modifie le préfixe si la différence est négatif
total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue
}
if (total_secondes > 0) { var jours = Math.floor(total_secondes / (60 * 60 * 24)); var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60)); minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60); secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));
var et = "et"; var mot_jour = "jours,"; var mot_heure = "heures,"; var mot_minute = "minutes,"; var mot_seconde = "secondes";
if (jours == 0) { jours = ''; mot_jour = ''; } else if (jours == 1) { mot_jour = "jour,"; }
if (heures == 0) { heures = ''; mot_heure = ''; } else if (heures == 1) { mot_heure = "heure,"; }
if (minutes == 0) { minutes = ''; mot_minute = ''; } else if (minutes == 1) { mot_minute = "minute,"; }
if (secondes == 0) { secondes = ''; mot_seconde = ''; et = ''; } else if (secondes == 1) { mot_seconde = "seconde"; }
if (minutes == 0 && heures == 0 && jours == 0) { et = ""; }
compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde; } else { compte_a_rebours.innerHTML = 'Compte à rebours terminé.'; }
var actualisation = setTimeout("compte_a_rebours();", 1000); } compte_a_rebours(); </script>
|
| |