Compte à rebours jours, heures, minutes et secondes en JavaScript

Petite explication sur la manière de faire un compte à rebours en JavaScript, pour un lancement, etc. Rapide et efficace !

Bonjour,

Comme on m'a demandé plusieurs fois un script Javascript (JS) pour mettre en place un compte à rebours sur un site internet, je vais vous donner un petit script qui indique le nombre de jours, d'heures, de minutes, et de secondes restantes avant un évênement (dont bien sûr, vous fixez la date).

Code à insérer

Voici le bout de code à insérer où vous le souhaitez :

<label id="Compte"></label>

<script type="text/JavaScript">

var Affiche=document.getElementById("Compte");

function Rebour() {

var date1 = new Date();

var date2 = new Date ("Oct 1 00:00:00 2008");

var sec = (date2 - date1) / 1000;

var n = 24 * 3600;

if (sec > 0) {

j = Math.floor (sec / n);

h = Math.floor ((sec - (j * n)) / 3600);

mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);

sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));

Affiche.innerHTML = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";

window.status = "Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";

}

tRebour=setTimeout ("Rebour();", 1000);

}

Rebour();

</script>

A modifier : Pour choisir votre date, il vous suffit de changer concernant "date2" : ("Oct 1 00:00:00 2008")

Le mois est à laisser en trois lettres, 1 est le jour du mois (il ne sert à rien de mettre un 0), et 00:00:00 représente heures:minutes:secondes.

Bien entendu, le compte à rebours est dynamique et s'actualise tout seul...

Par habboalexandre , Le 18 Septembre 2008 à 18h52
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à Javascript

Commentaires sur cet article

Comment on change la taille?

merci c'est inpec

Si ça peut aider certains, voici un code à peut près similaire :
http://dewep.net/Tutoriel-5/Compte-a-rebours-JavaScript

Merci pour le script, vraiment parfait !

Bonjour,

Merci pour votre script, c'est exactement ce que je recherche.
J'aimerai ajouter quelques donnees comme ajouter un texte a la fin du compte a rebours mais je ne sais pas ou l'inserer et ne connais pas le code non plus.
Egalement supprimer les "s" au jours, heures, minutes lorsqu'il ne reste plus qu'un jour, etc...
Pouvez-vous medire comment faire ?
En vous remerciant a l'avance.

Salut, merci pour ce code!
Mais en fait je ne sais pas du tout où il faut écrire ce code....
Sur une truc genre xxx.php mais le quel? je nage complet.... j'ai essayé sur le header, le index... ça bug...
J'ai une boutique Prestashop, j'aimerai l'insérer en page d'accueil...
Merci d'avance pour un tuto pour newbie....

Seb

Bravo ! Et merci pour ce code.

Comment on fait pour recuperer dynamiquement par le biais de la fonction DATE en php la date du serveur ?

en réponse à Neoxyde

il te suffit de remplacer

var date1 = new Date();

par

var date1 = new Date("xxxx");

et a la place des XXXX tu recupere dynamiquement par le biais de la fonction DATE en php la date du serveur par exemple

Une petite question. Le compteur s'actualise selon l'heure et la date de l'ordinateur. Y a t il possibilité de la fixer par rapport à un fuseau horaire?
Merci d'avance

Merçi ça marche bien

L'un est Jun, l'autre Jul

Auh... Juste un truc, comment on différencie juin et juillet si on doit l'indiquer en 3 lettres? C'est les 3 premières lettres en anglais?

Merci

merci pour votre aide

Dommage que tu n'explique pas comment placer un événement