[JavaScript] Compte à rebours (3 versions)

[JavaScript] Compte à rebours (3 versions) - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [JavaScript] Compte à rebours (3 versions) (/showthread.php?tid=480)

[JavaScript] Compte à rebours (3 versions) - Raoull - 23-11-2006

Voici un compte à rebours, pour les jeux en temps réel, à la façon d'OGame.
Il est simplifié et donc personnalisable à volonté. Testé sous IE et Opera. Ne doit pas poser de souci sous FF.

La fonction javascript :

Code PHP :
<?php 

<script language="JavaScript">

function reste(zetime) {

    if (zetime>0) {

        var heures = Math.floor(zetime / 3600);

        var minutes = Math.floor(((zetime / 3600) - Math.floor(zetime / 3600)) * 60);

        var secondes = zetime - ((Math.floor(zetime / 60)) * 60);

        document.getElementById("axion").innerHTML = heures + ":" + minutes + ":" + secondes;

        var restant = zetime - 1;

        setTimeout("reste(" + restant + ")", 1000);

    }

    else {

        document.getElementById("axion").innerHTML = "<a href='page.php'>Page</a>";

    }

}

</script>

L'appel en php :

Code PHP :
<?php 

// le temps restant que l'on veut voir affiché dans notre compte à rebours

// en secondes !

// Cela peut être calculé à partir du resultat d'une requete dans la bdd

// par exemple $tr=$temp_de_fin - time();

$tr=60; // ici 60 secondes pour cet exemple

// le div (on peut utiliser un span) où va s'afficher le compte à rebours

// qui doit posseder un nom dans l'attribut "id" pour l'utilisation du innerHTML

echo '<div id="axion">temps restant</div>';

// l'appel à la fonction javascript, où on précise donc le nb de secondes à décompter

echo '<script language="JavaScript">reste('.$tr.');</script>';

Au lieu d'afficher un lien à la fin du compte à rebours :

Code PHP :
<?php 

document.getElementById("axion").innerHTML = "<a href='page.php'>Page</a>"; 

On peut aussi faire une redirection directe vers la page :

Code PHP :
<?php 

document.location.href = "page.php"; 

Ce script fonctionne pour afficher 1 (et 1 seul) compte à rebours.

Voici à main levée, la même fonction pour afficher pluisieurs comptes à rebours (pas testé ancore mais pas sorcier) :

Code PHP :
<?php 

<script language="JavaScript">

function reste(zetime, nom_id) {

    var nid = nom_id;

    if (zetime>0) {

        var heures = Math.floor(zetime / 3600);

        var minutes = Math.floor(((zetime / 3600) - Math.floor(zetime / 3600)) * 60);

        var secondes = zetime - ((Math.floor(zetime / 60)) * 60);

        document.getElementById(nid).innerHTML = heures + ":" + minutes + ":" + secondes;

        var restant = zetime - 1;

        setTimeout("reste(" + restant + ", " + nid + ")", 1000);

    }

    else {

        document.getElementById(nid).innerHTML = "<a href='page.php'>Page</a>";

    }

}

</script>

<?

// 1er compte à renbours

$tr_1=60;

echo '<div id="axion_1">temps restant</div>';

echo '<script language="JavaScript">reste('.$tr_1.', "axion_1");</script>';

// 2eme compte à rebours

$tr_2=120;

echo '<div id="axion_2">temps restant</div>';

echo '<script language="JavaScript">reste('.$tr._2', "axion_2");</script>';

// etc.

?>

Et pour finir (jamais 2 sans 3), une 3eme version (testée) qui gèrent plusieurs compteurs toujours, mais où cette fois on peut personnaliser le lien pour chacun :

Code PHP :
<?php 

<script language="JavaScript">

function reste(zetime, nom_id, zelien) {

    var nid = nom_id;

    var lien = zelien;

    if (zetime>0) {

        var heures = Math.floor(zetime / 3600);

        var minutes = Math.floor(((zetime / 3600) - Math.floor(zetime / 3600)) * 60);

        var secondes = zetime - ((Math.floor(zetime / 60)) * 60);

        document.getElementById(nid).innerHTML = heures + ":" + minutes + ":" + secondes;

        var restant = zetime - 1;

        setTimeout("reste(" + restant + ",'" + nid + "','" + lien + "')", 1000);

    }

    else {

        document.getElementById(nid).innerHTML = "<a href='" + lien + "'>Terminé</a>";

    }

}

</script>

<?

// 1er compte à renbours

$tr_1=60;

echo '<div id="axion_1">temps restant</div>';

echo '<script language="JavaScript">reste('.$tr_1.', "axion_1", "page1.php");</script>';

// 2eme compte à rebours

$tr_2=120;

echo '<div id="axion_2">temps restant</div>';

echo '<script language="JavaScript">reste('.$tr._2', "axion_2", "page2.php");</script>';

?>

PS : je sais pas pourquoi un "?>" s'affiche à la fin de certain bloc php. Je pense que ca vient d'un petit bug du forum...

RE: [JavaScript] Compte à rebours (3 versions) - Kevin - 26-12-2006

L'aide pour ce script ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=851