Affichage de plusieurs compte à rebours dans un while php

**covin85** · 11/08/2010, 00h39

Bonjour,
Dans un jeux de stratégie, les joueurs ont la possibilité de créer des bâtiments.

Les bâtiments mettent un certain temps à être bâtit, ce temps est calculé par 2 variable dans une BDD:
- $myrow["temps"] -> l'heur en secondes du début de la construction
- $myrow["fin"] -> Chiffre indiquant le nombre de seconde que met le bâtiment à être construit.

Ils leurs est possible de construire plusieurs bâtiments en même temps.

Dans un while je génère un tableau affichant la liste des bâtiments en construction ainsi qu'un compte à rebours indiquant le temps restant avant le fin de construction de chaque bâtiment.

Mon script est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
$req = mysql_query("SELECT * FROM tconstru WHERE qui = '".$_SESSION['login']."' && Village = '$Nom' ORDER by temps DESC");  
while ($myrow = mysql_fetch_array($req)) 
{
echo "<span class='Style1'>En cours de construction :";
echo "<br><br><table width='500' border='1'>" ;
echo " <tr>" ;
echo "<span class='Style1' style='margin-right:3; margin-left:3;'>" ;
echo "<tr><th></th>";
echo "<th>Temps restant</th></tr>";
   $req = mysql_query("SELECT * FROM tconstru WHERE qui = '".$_SESSION['login']."' && Village = '$Nom' ORDER by temps DESC"); 									 
   while ($myrow = mysql_fetch_array($req)) 
   {	
   echo "<tr><th><span class='style42'>";
   echo "</span></th><th>";
 
      /************** Temps Restant **************/
      $Temps_1 = mktime();
      $fin2_1 = ($Temps_1 - $myrow["temps"]); /* s écoulé */
      $fin_1 = ($myrow["fin"] - $fin2_1); /* s restante */
      $heure_1 = floor($fin_1 / 3600);
      if($heure_1 < 1) $heure_1 = 0 ;
      $minutes2_1 = (3600 * $heure_1); /* s prise par les heures */
      $minutes1_1 = ($fin_1 - $minutes2_1); /* s restantes sans les heurs */ 
      $minutes0_1 = floor($minutes1_1 * 60);
      $minutes_1 = floor($minutes0_1 / 3600);
      $seconde_1 = ($fin_1-(($minutes_1 * 60) + $minutes2_1)); /* s restantes sans les heurs et les minutes */
 
      $heures   = $heure_1 ;  // les heures < 24
      $minutes  = $minutes_1 ;   // les minutes  < 60
      $secondes = $seconde_1 ;  // les secondes  < 60
 
      $annee = date("Y");  // par defaut cette année
      $mois  = date("m");  // par defaut ce mois
      $jour  = date("d");  // par defaut aujourd'hui
 
      $redirection = "Village.php?nom=$Nom"; // quand le compteur arrive à 0
 
      $secondes = mktime(date("H") + $heures,
      date("i") + $minutes,
      date("s") + $secondes,
      $mois,
      $jour,
      $annee
      ) - time();
 
      ?>
      <script type="text/javascript">
      var temps = <?php echo $secondes;?>;
      var timer =setInterval('CompteaRebour()',1000);
      function CompteaRebour(){
 
      temps-- ;
      j = parseInt(temps) ;
      h = parseInt(temps/3600) ;
      m = parseInt((temps%3600)/60) ;
      s = parseInt((temps%3600)%60) ;
      document.getElementById('minutes').innerHTML= (h<10 ? "0"+h : h) + '  h :  ' +
                                                    (m<10 ? "0"+m : m) + ' mn : ' +
                                                    (s<10 ? "0"+s : s) + ' s ';
      if ((s == 0 && m ==0 && h ==0)) {
      clearInterval(timer);
      url = "<?php echo $redirection;?>"
      Redirection(url)
      }
      }
      function Redirection(url) {
      setTimeout("window.location=url", 500)
      }
 
      </script>
 
<?
      echo "<body onLoad='timer'>";
      echo "<div id='minutes' style='font-size: 12px;'></div></span>";
      echo "<body>";
 
/***********************************************/
   }	
echo "</th></tr></span>";
echo "</tr>";
echo "</table>";
}
?>

Le problème est le suivant :
Un seul compte à rebours est affiché.
Ne connaissant absolument pas le Javascript je vien vous demandez votre aide, Merci .

**vermine** · 11/08/2010, 07h31

Bonjour,

En survolant rapidement votre code (nous préférons voir le code HTML généré plutôt que du PhP

), je pense que vous affichez les deux timers au même endroit. Il faudrait peut-être les concaténer au lieu d'écraser l'ancien par le nouveau:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('minutes').innerHTML += <br /> ...

**SpaceFrog** · 11/08/2010, 09h14

heu vouloir faire un timer en php est une vue de l'esprit ...
une fois que la page à quitté le serveur ... php n'existe plus ...

**vermine** · 11/08/2010, 10h14

C'est un timer Javascript.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<script type="text/javascript">
      var temps = <?php echo $secondes;?>;
      var timer =setInterval('CompteaRebour()',1000);
      function CompteaRebour(){
           ...

**covin85** · 11/08/2010, 20h46

Voici le code HTML généré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<th>      <script type="text/javascript"> 
      var temps = 1005;
      var timer =setInterval('CompteaRebour()',1000);
      function CompteaRebour(){
 
      temps-- ;
      j = parseInt(temps) ;
      h = parseInt(temps/3600) ;
      m = parseInt((temps%3600)/60) ;
      s = parseInt((temps%3600)%60) ;
      document.getElementById('minutes').innerHTML= (h<10 ? "0"+h : h) + '  h :  ' +
                                                    (m<10 ? "0"+m : m) + ' mn : ' +
                                                    (s<10 ? "0"+s : s) + ' s ';
      if ((s == 0 && m ==0 && h ==0)) {
      clearInterval(timer);
      url = "Village.php?nom=101"
      Redirection(url)
      }
      }
      function Redirection(url) {
      setTimeout("window.location=url", 500)
      }
 
      </script> 
      <body onLoad='timer'><div id='minutes' style='font-size: 12px;'></div></span><body><tr><th><span class='style42'>Construction : Laboratoire</span></th><th>      <script type="text/javascript"> 
      var temps = 996;
      var timer =setInterval('CompteaRebour()',1000);
      function CompteaRebour(){
 
      temps-- ;
      j = parseInt(temps) ;
      h = parseInt(temps/3600) ;
      m = parseInt((temps%3600)/60) ;
      s = parseInt((temps%3600)%60) ;
      document.getElementById('minutes').innerHTML= (h<10 ? "0"+h : h) + '  h :  ' +
                                                    (m<10 ? "0"+m : m) + ' mn : ' +
                                                    (s<10 ? "0"+s : s) + ' s ';
      if ((s == 0 && m ==0 && h ==0)) {
      clearInterval(timer);
      url = "Village.php?nom=101"
      Redirection(url)
      }
      }
      function Redirection(url) {
      setTimeout("window.location=url", 500)
      }
 
      </script> 
      <body onLoad='timer'><div id='minutes' style='font-size: 12px;'></div></span><body>

En modifiant le script comme vous le proposé Vermine, la page affiche chaque seconde un nouveau compteur, et cela infiniment.

**vermine** · 12/08/2010, 07h36

Oui effectivement ce n'était pas très malin de ma part.

Je ne comprends pas bien votre page. Vous avez plusieurs fois les mêmes éléments:

- body (avec des problèmes de fermeture de tags)
- CompteaRebour()
- <div id='minutes'>

Un id, un body et un nom d'objet comme une fonction ne doivent exister qu'une seule fois. :-O

La fonction CompteaRebour() peut n'être définie qu'une seule fois et utilisable sur toute la page.
A mon sens il devrait y avoir autant de div pour afficher le timer que de timer voulu. Soit vous n'en avez que deux et alors vous pouvez les créer en dur dans le code. Soit vous en avez "x" et vous pouvez les créer dynamiquement avec une boucle. Au chargement de la page (body="onload") comme vous l'utilisez déjà, vous appelez deux fois la fonction CompteaRebour(id_div). Une fois avec l'id de la première div. Une seconde fois avec l'id de la seconde div. Déclarez bien deux timers différents!
En fin de fonction, vous faites un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(id_div).innerHTML = ... (le timer)

Affichage de plusieurs compte à rebours dans un while php

JavaScript

Vue hybride

Discussions similaires

Partager

Partager