Javascript - jQuery : Compte à rebours

jQuery : Compte à rebours

jQuery : Compte à rebours

Par Sunshine75, publié le 20/11/2010 à 16:58:37

Pour commencer votre page doit être liée à la dernière version de jQuery (jquery-1.4.1.js). (Le fichier est disponible dans le fichier téléchargeable)

Etape 1 : Dans une premier temps nous allons installer les codes "Javascript".
Placez le code suivant entre les balises <head></head> de votre page :

// Appel de librairie jquery

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>

<script type="text/javascript">

// Fonction qui sera appeler à la sortie du Timeout

function affichage(){

// Affichage du message dans la div affichage

	document.getElementById("affichage").innerHTML = "Fin du compte &agrave; rebour";

};

// Initialisation de la temporisation

temp = 0;

jQuery(function(){

// Boucle de décrémentation

// 10 représente le temps en secondes

	for (i=10 ;i > -1;i--){

		setTimeout("jQuery('#affichage').text('Patientez "+i+" secondes');",temp);

		temp+=1000;

	}

});



jQuery(document).ready(function(){

	setTimeout("affichage();",temp - 1000);

});



</script>

Etape 2 : Maintenant nous allons placer une div entre nos balises body, avec comme paramètre "id" : affichage, c'est donc ici que nous afficherons les messages.
Placez le code suivant entre les balises <body></body> de votre page :