Compte à rebours dans une boucle et variable

Version imprimable

Bonjour à tous,

J'essai actuellement de faire un compte à rebours en Javascript dans une boucle PHP tout en prenant des infos depuis ma base de données.

En parcourant les script et tutoriel sur le web je me suis donc inspiré de ce script pour commencer à le batir:
https://www.aidoweb.com/tutoriaux/co...javascript-302

Deux soucis me perturbe:

1 - Dans la partie

Code:

'.$row['id'].'

L'Id me donne 51 depuis ma base de données (51 est la bonne valeur donc ok). Mais dans le code JavaScript

Code:

var id_game = "<?php echo $row['id'];?>";

id_game me donne comme valeur 47 et la je ne comprend pas pourquoi... bien sur su je remplace la valeur 47 par 51 manuellement le compteur fonctionne sur le premier jeux de la liste.

2 - Pour la boucle des comptes à rebours, je ne vois comment faire pour la créer en JavaScript, comme vous pouvez voir dans le code je commence par ajouter l'id du jeux à l'id de la Div mais ensuite? Tout ce que j'ai essayé ne fonctionne pas, enfin déjà il faudrait que j'arrive a pouvoir récupéré le bonne id_game dans le javascript.

- La partie pour récupérer la date de fin du compte à rebours fonctionne

Code:

var date_cpt = "<?php echo $row['date_cpt'];?>";

Merci à ceux ou celles qui pourront m'aider, je sais que le sujet à déjà été traité, j'ai fait pas mal de recherches mais je ne trouve pas de réponses à mes questions.

Voici le code avec mes modifications:
Code:

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 <script type="text/JavaScript"> var date_cpt = "<?php echo $row['date_cpt'];?>"; var id_game = "<?php echo $row['id'];?>"; var multirebour = "homepage_gift_rebour_" + id_game ; var Affiche=document.getElementById(multirebour); function Rebour() { var date1 = new Date(); var date2 = new Date (date_cpt); 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 = " " + id_game +" Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s "; window.status = " " + id_game +" Temps restant : " + j +" j "+ h +" h "+ mn +" min "+ sec + " s "; } tRebour=setTimeout ("Rebour();", 1000); } Rebour(); </script>
Code:

<label id="homepage_gift_rebour_'.$row['id'].'"></label>

10/12/2017, 20h48
mathieu

essayez le code qui est dans le 1er message de la discussion suivante, cela pourra peut-être vous aider :
https://www.developpez.net/forums/d1...ur-incremente/
12/12/2017, 21h44
Dec24300

Merci Mathieu pour votre lien, j'ai testé le code dans une page html, je constate que le temps de calcul du compteur en lui même met un peu de temps à charger.

Je vais essayé de l'intégrer et l'adapter avec mes données pour voir ce que cela donne.

Merci encore Mathieu mais j'ai abandonné le code qu'il y a sur le lien que tu m'a donné, ma page met trop de temps à charger.

Je suis donc revenu sur mon point de départ, j'arrive maintenant à afficher mes compte à rebours dans la boucle php, à deux soucis près:
- Les compteurs s'affichent mais il n'y en a qu'un seul qui décompte dynamiquement, les autres restent statiques.
- Sur ma boucle qui présente une liste de 6 jeux, le compteur sur le sixième en fin de liste ne s'affiche pas.

Pour le premier point, j'ai cru comprendre qu'il faudrait rajouter un " new Array() " mais je ne sais pas ou, j'ai voulu le placer après " Affiche.innerHTML " mais ça ne fonctionne pas.
Code:

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 <script type="text/JavaScript"> var date_cpt = "<?php echo $row['date_cpt'];?>"; var id_games2 = parseInt("<?php echo $idgame;?>"); var id_games = parseInt(id_games2); var test = "homepage_gift_rebour_" + id_games ; var Affiche= document.getElementById(test); function Rebour() { var date1 = new Date(); var date2 = new Date (date_cpt); 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>

16/12/2017, 21h35
mathieu

votre exemple avec un compteur fonctionne.
montrez nous le code que vous avez essayé avec 2 compteurs.

Merci pour votre réponse. Et bien en fait c'est celui que j'ai posté au dessus.

Le JavaScript:

Code:

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
<script type="text/JavaScript">
var date_cpt = "<?php echo $row['date_cpt'];?>";
var id_games2 = parseInt("<?php echo $idgame;?>");
var id_games = parseInt(id_games2);
var test =  "homepage_gift_rebour_" + id_games ;
 
var Affiche= document.getElementById(test);
function Rebour() {
var date1 = new Date();
var date2 = new Date (date_cpt);
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)));
 
    if(sec < 10) {
        sec = '0' + sec;
    }
 
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>

Dans mon php:

Code:

<label id="homepage_gift_rebour_'.$idgame.'" class="homepage_gift_rebour"></label>

Avec ceci, j'ai mes compte à rebours qui s'affiche, mais seulement 1 seul décompte de manière dynamique pour les autres il faut réactualiser la page pour voir la différence des décomptes.