Créer un compte à rebours en javascript avec jQuery

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 :

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