Compte à rebours pour événement

Soyez le premier à donner votre avis sur cette source.

Snippet vu 30 551 fois - Téléchargée 16 fois

Contenu du snippet

Petit script de compte à rebours pouvant mentionner le nombre de jours, d'heures, de minutes et de secondes restantes.
De plus, il offre un message différent une fois l'événement en cours ou dépassé.
Enfin, le compte à rebours est aussi inscrit dans la barre des tâches.

Code à placer dans la balise <BODY></BODY> à l'emplacement voulu.
Le code n'a volontairement pas été simplifié pour comprendre les différentes étapes.

Ah, et si vous le souhaitez, c'est pour un tournois international de baseball à Monthey en Suisse en septembre 2008 alors vous pouvez venir faire un tour ;o)

Source / Exemple :


<label id="Compte"></label>
<script type="text/JavaScript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("Sep 5 17:00:00 2008"); // Date et heure de l'événement
var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
var n = 24 * 3600; //nombre de secondes dans un jour
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 +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
    window.status = "Temps restant : " + j +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
}
else if (Math.abs(sec) < (3 * n)) { // Durée de l'événement
    Affiche.innerHTML = "Temps restant : Le tournoi est en cours, venez profiter du spectacle";
    window.status = "Temps restant : Le tournoi est en cours, venez profiter du spectacle";
}
else {
    Affiche.innerHTML = "Temps restant : Le tournoi est terminé, retrouvez toutes les informations sur le site";
    window.status = "Temps restant : Le tournoi est terminé, retrouvez toutes les informations sur le site";
}

tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
1
Re,
J'ai corrigé le problème :
var date2 = new Date (2010,4,22,14,30,00);
ça marche avec IE, FF et google chrome

/!\ Pour le mois 0=janvier; 1=février
Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
1
Bonjour,
merci pour cette source! ça marche nickel sauf sous google chrome...
var sec = NaN ???
a voir!
Messages postés
44
Date d'inscription
dimanche 3 décembre 2000
Statut
Membre
Dernière intervention
21 mai 2014

Salut nattydreadlocks,

J'ai voulu t'aider dans ton problème en créant un code à partir du début. Cependant, vers la fin, je me suis rendu compte que j'avais peut-être mal compris ta question.

Le nouveau code, tu pourras le trouver ici : http://www.javascriptfr.com/codes/COMPTE-REBOURS-EVENEMENTS-REPETITION_51728.aspx.

Dis-moi s'il t'est quand même utile.

Bon courage
Messages postés
3
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
3 mai 2010

salut salut bon j'ai trouvé une solution pour utiliser ton script. le problème c'est que j'ai besoin de récupérer un variable que j'ai défini en phpdonc voilà ce que j'ai tenté

<script type="text/JavaScript">
window.status="";
function Rebour(LabelId,DateEvenement,DateFinEvenement,Text) {
var Affiche=document.getElementById(LabelId);
var date1 = new Date();
var date2 = new Date (DateEvenement); // Date et heure de l'événement
var date3 = new Date (DateFinEvenement); // Date et heure de la fin de l'événement
var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
var TempsRestant=(date3-date1);
var n = 24 * 3600; //nombre de secondes dans un jour

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 = unescape(Text) + " temps restant : " + j +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
//window.status = unescape(Text) + " temps restant : " + j +" jours, "+ h +" h "+ mn +" min et "+ sec + " sec ";
}
else if (Math.abs(sec) < TempsRestant ) { // Durée de l'événement
Affiche.innerHTML = unescape(Text) + " en cours";
//window.status += unescape(Text) + " en cours";
}
else {
Affiche.innerHTML = unescape(Text) + " terminé";
//window.status += unescape(Text) + " terminé";
}

tRebour=setTimeout ("Rebour('" + LabelId + "','" + DateEvenement + "','" + DateFinEvenement + "','" + Text + "');", 1000);
}
Rebour("Compte1", "<?php echo $date1; ?>" , "<?php echo $date2; ?>" , escape("Diffusion aux USA, Grey's Anatomy, Saison 5, Premier Episode"));

</script>

(ici on m'affiche que le'évènement est terminé hors j'ai etabli la date de depart au 8/05/2010)

J'ai également essayé de les insérer de la sorte:

var datedebut = "<?php echo $date1; ?>" ; // Date fin inscription (et début votes)
var datefin = "<?php echo $date2; ?>" ; // Date fin votes

Rebour("Compte1", + datedebut + , + datefin + , escape("Diffusion aux USA, Grey's Anatomy, Saison 5, Premier Episode"))

Mais là plus rien ne s'affiche

Je supose qu'il s'agit d'une erreur de syntaxe mais je ne vois pas comment faire.

(pr info les dates sont
May 08 19:15:45 2010 et May 17 19:15:45 2010)
Messages postés
3
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
3 mai 2010

ok je comprend... Le truc c'est que je n'y connais pas grand chose et je ne trouve pas de tutoriel ou ressource adaptée à ce que je cherche. Saurais-tu me donner une piste?
Afficher les 48 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.