Tutoriel - Compte à rebours JavaScript
L'ensemble des tutoriels est soumis à la licence CC BY-NC-SA 3.0 (Code Juridique).
Vous êtes donc libre de remixer et partager l'oeuvre aux conditions de l'attribuer (lien vers cette page), de ne pas l'utiliser à des fins commerciales, et de la partager avec une licence identique ou similaire.
Besoin d'ajouter un compte à rebours sur votre site pour afficher le nombre de jours ... Avant un voyage prévu ? Avant votre date d'anniversaire ? ... ?
Nous utiliserons, dans ce tutoriel, du JavaScript.
Un minimum de connaissance en JavaScript est requis.
Je détaillerais cependant le plus possible.
La base
Quelques petites explications, mais là, rien de compliqué :
- On met un titre
- On met un encodage (le utf8)
- Et on crée une Div avec l'id "CompteARebours"
JavaScript
Base
On va ajouter donc notre code JavaScript après la Div :
On a donc créé une variable pour la Div avec l'id que l'on a choisit auparavant.
Remarque : Attention à bien mettre le code JavaScript après la Div ! Le JavaScript s'exécutant en même temps que la page, si ce code est placé avant, alors la Div n'existera pas !
Les dates
On enregistre dans une variable l'heure actuelle :
Puis celle de la fin du compte à rebours :
On va donc calculer la différence de secondes entre les deux.
Les variables des deux dates sont au format millisecondes. On fait donc une soustraction des deux dates, ce qui nous donne la différence de temps entre celles-ci en millisecondes. On divise ensuite par 1000 pour mettre le résultat en secondes.
Ce qui nous donne alors :
Si la variable "
secondes est une valeur positive, c'est que le compte à rebours n'est pas terminé ; si c'est une valeur négative, c'est qu'il est terminé.
On fait donc une petite condition :
Donc si c'est négatif, on modifie le contenu de la Div pour dire que le compte à rebours est terminé.
Voyons maintenant ce que nous allons faire si le compte à rebours est encore positif.
Nous allons déjà calculer le nombre de jours, d'heures, de minutes, et de secondes restants.
Pour les jours
60x60x24 = 86400
Il y a donc 86400 secondes dans une journée.
Donc le nombre de secondes divisé par ce nombre nous donne le nombre de jour(s) restant(s).
La fonction "
Math.floor" permet de faire une troncature à l'unité.
C'est à dire que si le résultat est "
1.2589" alors le nombre renvoyé sera "
1".
Pour les heures
Bon, je ne vais pas complètement détaillé, c'est seulement de la logique :
On soustrait le nombre de secondes totales restantes par le nombre de jours (mis en secondes). Et on divise le tout par 3600 pour avoir le nombre d'heures (Infos :
60*60 = 3600). On englobe une fois de plus le tout de la fonction "
Math.floor" pour ne pas renvoyé de nombre à virgule.
Pour les minutes
Même technique ...
Pour les secondes
Même chose.
Affichage
Nous avons donc bien le résultat attendu, il suffit de l'ajouter dans la Div :
Améliorations
Maintenant, nous allons encore améliorer ça pour avoir un meilleur résultat. Nous allons :
- 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
Alors on n'affiche que :
3 heures
- De plus, s'il reste 1 jour (ou heure, ou mi...), alors on va enlever le "s"
- Modifier le script pour qu'il s'actualise toutes les secondes, cela évitera de recharger la page pour voir le temps restant
- Mettre le JS en fichier externe
- Afficher un message d'erreur pour ceux qui n'ont pas leur JavaScript d'activé
Les mots et/ou "s" en trop
Pour résoudre les 2 premiers points, on remplace ceci :
Par :
Je pense qu'une simple lecture devrait vous permettre de comprendre.
Cependant, je tiens à vous expliquer quelques petites choses :
On décompose cette ligne en :
Donc si la variable "
DiffJour vaut "
1", alors la variable "
Jour vaut "
jour," ; sinon, elle vaut "
jours,".
Pour ce code :
C'est exactement la même chose, à part que la condition est un peu plus longue.
Remarque : "
&&" veut dire "
et". Donc Si "
DiffMin" vaut "
0",
ET si "
DiffHeure" vaut "
0",
ET si "
DiffJour" vaut "
0".
Ré-actualisation automatique
Maintenant, passons par une partie bien pratique, la ré-actualisation automatique du temps restant.
Pour cela, nous allons devoir englober notre code dans une fonction.
A la fin de cette fonction, nous ajouterons :
Cette ligne aura pour action de lancer la fonction "
LE_NOM_DE_NOTRE_FONCTION()" dans 1000 millisecondes (donc dans une seconde).
Pour ajouter notre fonction, il suffit alors de remplacer :
Par :
Puis remplacer ceci :
Par :
Reste à ajouter à la fin de notre code JavaScript le lancement de la fonction pour la première fois.
Remplacer alors :
Par :
JS dans fichier externe
Afin de rendre votre page plus agréable à lire, nous allons maintenant placer le code JavaScript en un fichier externe.
Pour cela, on déplace le code JavaScript dans un fichier externe : "
CompteARebours.js".
On y enlève le démarrage de la fonction "
compte_a_rebour()" à la fin.
On déplace également le :
Dans la fonction pour ne pas avoir d'erreur.
On revient maintenant dans notre fichier html :
- On ajoute le fichier JavaScript externe dans le "head" :
- On remplace ceci :
<body>
Par :
Ceci a pour effet de lancer la fonction "compte_a_rebour()" une fois la page finie de charger. Ainsi, la Div existera, même si on inclut le code JavaScript avant celle-ci.
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 :
La balise "
noscript" n'affiche le contenu
seulement si le JavaScript est désactivé.
Codes complets
Et voilà ! Tout devrait fonctionner.
Pour ceux qui le souhaite, voilà le code entier :
HTML
JavaScript
Questions / Remarques / Améliorations ?
N'hésitez pas à me contacter pour toutes questions / remarques / ou amélioration :
http://dewep.net/Contact
