JeuWeb - Crée ton jeu par navigateur
[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