Créer un compte à rebours en javascript avec jQuery

Mars 2013

Ici nous allons voir comment créer un compte à rebours en Javascript, en utilisant jQuery.

Pour commencer, voici le code HTML qui va servir à afficher le temps restant avant la fin du compte à rebours : nombre de jours, heures, minutes, secondes :

<div id="countdown">
	<strong>Temps restant</strong> :
	<span id="countdown_day" >--</span> jours
	<span id="countdown_hour">--</span> heures
	<span id="countdown_min" >--</span> minutes
	<span id="countdown_sec" >--</span> secondes
</div>

Le but du jeu va donc être de remplir les 4 <span> en javascript, à intervalle régulier (toutes les secondes), au fur et à mesure que le temps passe et qu'on se rapproche de la fin du décompte.

Pour gérer le compte à rebours, ils nous faut 2 informations de base :

  • La date "cible" : celle à laquelle le compte à rebours se termine, et vaut 00:00:00
  • La date courante

En faisant la différence entre ces 2 dates, ont va connaître le nombre de secondes qui nous sépare de la fin du compte à rebours.

Pour calculer le nombre de jours, heures..., je vais utiliser une fonction dateDiff écrite dans le cadre d'une autre FAQ : Calculer la différence entre 2 dates en Javascript.

On va aussi utiliser jQuery pour sélectionner les 4 span ci-dessus. Bien entendu on peut parfaitement faire sans jQuery, surtout une opération aussi simple que sélectionner des éléments, mais bon, on devient vite addict à jQuery ^^.

countdownManager = {
	// Configuration
	targetTime: new Date('2012-11-05 00:00:00'), // Date cible du compte à rebours (00:00:00)
	displayElement: { // Elements HTML où sont affichés les informations
		day:  null,
		hour: null,
		min:  null,
		sec:  null
	},
	
	// Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
	init: function(){
		// Récupération des références vers les éléments pour l'affichage
		// La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
		this.displayElement.day  = jQuery('#countdown_day');
		this.displayElement.hour = jQuery('#countdown_hour');
		this.displayElement.min  = jQuery('#countdown_min');
		this.displayElement.sec  = jQuery('#countdown_sec');
		
		// Lancement du compte à rebours
		this.tick(); // Premier tick tout de suite
		window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
	},
	
	// Met à jour le compte à rebours (tic d'horloge)
	tick: function(){
		// Instant présent
		var timeNow  = new Date();
		
		// On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
		if( timeNow > this.targetTime ){
			timeNow = this.targetTime;
		}
		
		// Calcul du temps restant
		var diff = this.dateDiff(timeNow, this.targetTime);
		
		this.displayElement.day.text(  diff.day  );
		this.displayElement.hour.text( diff.hour );
		this.displayElement.min.text(  diff.min  );
		this.displayElement.sec.text(  diff.sec  );
	},
	
	// Calcul la différence entre 2 dates, en jour/heure/minute/seconde
	dateDiff: function(date1, date2){
		var diff = {}                           // Initialisation du retour
		var tmp = date2 - date1;

		tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
		diff.sec = tmp % 60;                    // Extraction du nombre de secondes
		tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
		diff.min = tmp % 60;                    // Extraction du nombre de minutes
		tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
		diff.hour = tmp % 24;                   // Extraction du nombre d'heures
		tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
		diff.day = tmp;

		return diff;
	}
};

jQuery(function($){
	// Lancement du compte à rebours au chargement de la page
	countdownManager.init();
});

Bon ça fait beaucoup de code d'un coup, donc voilà quelques explications :

La première chose à voir c'est l'objet countdownManager qui est créé. Cet objet va servir à contenir toutes les variables et les fonctions qui vont servir à manipuler le compte à rebours. Ça n'est pas obligatoire, mais c'est une bonne pratique. Ça permet d'isoler le code dans une sorte de Namespace dédié.

Dans un tout autre contexte, cet article est très intéressant : forcer le format d'une cellule excel.

Ensuite, on initialise les variables de notre objet countdownManager : targetTime contient la date cible du compte à rebours, ça c'est à vous de le régler. Et il y a aussi displayElement qui contient les références vers les éléments dans lesquels on affiche le temps restant.

La fonction init est une sorte de constructeur, elle permet d'initialiser le compte à rebours et ne doit être appelée qu'une seule fois au chargement de la page. Dans cette fonction, on commence par récupérer les références dans displayElement (comme ça on aura plus besoin de faire appel au sélecteur jQuery pour ces éléments pas la suite, optimisant ainsi les performances). Et surtout on définit un intervalle qui va nous permettre de mettre à jour le compteur toutes les secondes (1 seconde = 1000 ms), en appelant la fonction tick.

Et il ne reste plus que la fonction tick qui sert comme son nom l'indique à rafraichir le compteur à chaque tic d'horloge. Elle utilise la fonction dateDiff dont j'ai parlé plus haut.

Et voilà, vous avez un compte à rebours :

Tester /ressources/exemple/faq/js-countdown.html
Compte à rebours en Javascript
Il expire dans 5 jours, 6 heures, 25 minutes et 37 secondes

Fini de lire cette page ? allez faire un tour ici : champ de bataille, ça peut vous intéresser.

11 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°2572 par Arno
Arno mercredi 29 mai 2013, 22:16
J'oubliais qu'il doit prendre en compte la date du jour et non le moment de chargement de la page du timer.

Merci.
commentaire n°2577 par GBS
GBS mardi 11 juin 2013, 00:21
Possible que le compte à rebours reparte à zéro un temps donné après la fin?

En gros, le compte à rebours se termine : il affiche une autre phrase, et 2h après, le compte à rebours recommence à zéro ... ect ect à l'infini.

Merci d'avance
commentaire n°2773 par pilou
pilou mercredi 19 mars 2014, 16:11
Bonjour et merci pour le tuto, mais chez moi cela ne fonctionne qu'avec Chrome, je pense que c'est:
targetTime: new Date('2014-05-10 00:00:00'),
Qui pose problème...
Quelqu'un aurait-il la solution pour tous les navigatuers ??
Merci
commentaire n°2775 par pilou
pilou jeudi 20 mars 2014, 11:12
Pour info, j'ai trouvé ce qui merdait, c'était effectivement dans le format de la date, il faut l'écrire comme ceci:
targetTime: new Date('May 10 00:00:00 2014'),

Merci
commentaire n°2976 par Mygale06
Mygale06 lundi 12 janvier 2015, 17:44
Bonjour est il possible de faire que le compteur a la fin de son rebours de repartir ....

Je m'explique, je voudrais avoir un rebours sur une page qui dit (Exemp): Temps restant pour ....
l’événement aura lieu tout les dimanches a 11H et quand le rebours arrive a sa fin de repartir pour le dimanche suivant.

Merci d'avance pour vos infos ou ajout dans cette partie du script mentionné sur cette page
commentaire n°3109 par Erreur
Erreur samedi 18 juillet 2015, 05:27
je met sa comment les 2 code dans un .html ?
commentaire n°3159 par graphibre
graphibre jeudi 24 septembre 2015, 17:27
Merci pour ce tuto ! Tout fonctionne parfaitement !
commentaire n°3268 par dkguku
dkguku mercredi 16 mars 2016, 09:56
ca marche pas
commentaire n°3352 par paulrolandtitti
paulrolandtitti lundi 25 juillet 2016, 16:58
Bonjour a tous j'aimerais savoir comment fait-on pour créer un compte a rebours dans excel
commentaire n°3447 par Dj S
Dj S samedi 14 janvier 2017, 20:30
www.Dj S.net
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré