délais dans une boucle entre les éléments du tableau

**dancom5** · 11/03/2012, 10h49

Bonjour à vous.

Dans une boucle foreach, pourrait-on afficher avec un délais
entre les éléments du tableau?

Ici, j'affiche 1 à 49 en un seul coup. Mais je veux faire afficher
un après l'autre avec un délais ou bien un effet avec le chiffre.

Code :

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

1
2
3
4
5
6
7
8
 
<?php
$numbers = range(1,49);
 
foreach ($numbers as $v) {
  echo ' '.$v;
}
?>

**LeGilou** · 11/03/2012, 12h01

Bonjour,

Tu ne peux pas faire ça avec un langage serveur comme PHP.
Le principe de PHP, c'est qu'il traite la demande, coté serveur, puis envoi le résultat au client (le navigateur) qui l'interprète (HTML, JavaScript, ...)

C'est pour ça que le serveur traite toute la boucle, avant de l'envoyer au client qui l'affiche.

Il y a quand même des options :
- JavaScript. Tout s’exécute coté client. mais je présume que ce que tu cherches à faire est un peu plus compliqué que d'afficher des numéros...
- Ajax. Ça permet de faire des appels serveur, depuis une fonction javasript (client).

Il y a sur developpez.com des tutoriaux très bien fait sur cette techno.

A bientôt,
Gillou.

**dancom5** · 11/03/2012, 22h17

Bonjour.

Tien, j'ai essayé quelque chose du genre et ça affiche que le dernier chiffre.
Ce que j'ai tenté de faire est une fonction qui affiche $v avec un délais d'une
seconde. Pas concluant.

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
<?php
$numbers = range(1,49);
foreach ($numbers as $v){ ?>
 
<script>
  function test(){
  document.write("<?php echo $v; ?>");
  }
</script>
 
<script>
  window.setTimeout('test()',1000);
</script>
 
<?php } ?>

**ABCIWEB** · 12/03/2012, 05h51

Si tu veux passer un tableau php à javascript utilises json_encode

Trivialement :

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
<?php
$numbers = range(1,49);
?>
 
<script>
var tab_php = <?php echo json_encode($numbers)?>;
 
function Affiche(i){
i++;
if (typeof tab_php[i] != 'undefined')
	{
		setTimeout('Affiche('+i+')',1000);
		document.getElementById('mondiv').innerHTML = tab_php[i];
	}
 
}
</script>
 
<body onload="Affiche(-1)">
<div id = "mondiv"></div>
</body>

**grunk** · 12/03/2012, 09h58

C'est techniquement possible en php en faisant quelque chose du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
ob_start();
echo "start"
 
foreach(....)
{
   //do something
   echo "progression dans la boucle <br />"
   ob_flush();
   flush();
}

Ca dépend cependant de certains paramètrage de php et éventuellement du serveur web pour que cela fonctionne

**dancom5** · 12/03/2012, 16h51

Bonjour.

Il y a bien un délai d'une seconde mais seulement au début de l'exécution
de la boucle. Le délai devrait être entre chaque chiffre qui apparaît
et tous les chiffres doivent restés affichés. C'est seulement le chiffre
49 qui reste visible.

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
<html>
<head>
</head>
<body>
 
<?php
ob_start();
 
$numbers = range(1,49);
foreach ($numbers as $v){ 
?>
 
<script>
  function test(){
  document.write("<?php echo $v; ?>");
  }
</script>
 
 
<script>
  window.setTimeout('test()',1000);
</script>
 
 
 
<?php
ob_flush();
flush();  
} 
?>
 
</body>
</html>

**ABCIWEB** · 12/03/2012, 17h38

T'as essayé mon code ?

**dancom5** · 13/03/2012, 00h30

Désolé pour le temps de réponse, j'ai mis un temps pour chercher sur la commande* et entre-temps j'ai reçu un autre message.

*

Code :

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

json_encode

Le délai entre chaque chiffre fonctionne mais les chiffres ne reste pas affiché. Ça fait comme un comptage de 1 à 49. Le dernier qui est 49 demeure affiché.

Envoyé par ABCIWEB

T'as essayé mon code ?

**ABCIWEB** · 13/03/2012, 00h40

Donc à la fin tu voudrais toute la liste avec les chiffres accolés ?

**dancom5** · 13/03/2012, 00h48

C'est exacte!

Par la suite, à la limite, pouvoir formater mon texte ou y mettre des effets en javascript. Mais au minimum avoir un délai entre les chiffres.

**ABCIWEB** · 13/03/2012, 00h51

Dans mon précédent code tu remplace la fonction "Affiche" par celle-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function Affiche(i){
i++;
if (typeof tab_php[i] != 'undefined')
	{
		setTimeout('Affiche('+i+')',1000);
 
		var nombre = document.createTextNode(tab_php[i]);
		document.getElementById('mondiv').appendChild(nombre);
	}
 
}

**dancom5** · 13/03/2012, 01h00

Oui, ça marche comme je voulais.

Les chiffres apparaissent bien.

Je tente de mettre plus d'une série.

Code :

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

1
2
3
4
 
1 2 3 4 5 6 7... 49
 
1 2 3 4 5 6 7... 49

C'est que j'ai créé un truque avec des chiffres aléatoire. Et j'en ai 3.

**ABCIWEB** · 13/03/2012, 01h08

Je regarderai cela plus tard car pour l'instant je mange (il faut comme en php, passer les paramètres dans la fonction).
En attendant pour le formatage de ta ligne il te suffit d'appliquer un style à <div id = "mondiv">

**dancom5** · 13/03/2012, 01h17

En faite mon code c'est un générateur de code aléatoire comme ceci :

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
<?php
function affichage($start_range,$end_range,$nb_count,$title){
 
	$numbers = range($start_range,$end_range);
	$rand_keys = array_rand($numbers,$nb_count);
	sort($rand_keys);
	?>
	<table class="l">
		<tr>
			<td class="ll">
				<span class="l"><?php echo $title; ?></span>
			</td>
			<?php
			foreach ($rand_keys as $k=>$v) {
				srand((double)microtime()*1000000);
				echo '<td class="l">'.$numbers[$v].'</td>';
			}
			?>
			<td>
				<img class="l" src="fleche.png">
			</td>
		</tr>
	</table>
 
<?php } ?>

J'en ai trois comme ça que j'affiche avec afficage(...);

Il me manquait qu'un délai entre chaque chiffre. Ça ne me dérange pas que les trois série les chiffres soit synchro.

Petit ajout : bon appétit !

**ABCIWEB** · 13/03/2012, 03h24

Voilà, comme dit plus haut j'ai passé les paramètres dans la fonction javascript "Affiche". Amuses-toi bien.

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
<?php
 
$numbers1 = range(1,49);
$numbers2 = range(50,60);
$numbers3 = range(100,130);
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title></title>
 
<script>
var tab_php1 = <?php echo json_encode($numbers1)?>;
var tab_php2 = <?php echo json_encode($numbers2)?>;
var tab_php3 = <?php echo json_encode($numbers3)?>;
 
function Affiche(i,tab,id){
i++;
if (typeof tab[i] != 'undefined')
	{	
		setTimeout(function(){Affiche(i,tab,id)},1000);
 
		var nombre = document.createTextNode(tab[i]+' ');
		document.getElementById(id).appendChild(nombre);
	}
 
}
 
</script>
</head>
 
<body onload="Affiche(-1,tab_php1,'mondiv1'),Affiche(-1,tab_php2,'mondiv2'),Affiche(-1,tab_php3,'mondiv3')">
 
<div id = "mondiv1" style="background:#FF9900"></div>
<div id = "mondiv2" style="background:#FFCCCC"></div>
<div id = "mondiv3" style="background:#FFFFCC"></div>
 
</body>
</html>

Bon pour que ça fonctionne il faut que les tableaux php soient indexés numériquement, sans trou et que le premier index soit 0 (cas général des tableaux numériques en php)

**dancom5** · 13/03/2012, 13h22

Bonjour.

J'essaie d'adapter mon code avec le dernier de ABCIWEB. Je n'y arrive pas.
Mon code tout seule fonctionne et celui de ABCIWEB aussi.

Mon code au lieu de faire une intervalle de 1 à 10 par exemple, je fais plutôt
un random en PHP et envoyer le résultat pour le traitement en javascript
pour appliquer le délai.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
		<title></title>
 
<?php
function hasard($start_range,$end_range,$nb_count){
 
	$numbers = range($start_range,$end_range);
	$rand_keys = array_rand($numbers,$nb_count);
	sort($rand_keys);
  foreach ($rand_keys as $k=>$v) {
    srand((double)microtime()*1000000);
    echo $numbers[$v];
			}
}
 
$number1 = hasard(1,10,11);
$number2 = hasard(11,20,11);
$number3 = hasard(21,30,11);
 
?>
 
<script>
var tab_php1 = <?php echo json_encode($number1)?>;
var tab_php2 = <?php echo json_encode($number2)?>;
var tab_php3 = <?php echo json_encode($number3)?>;
 
function Affiche(i,tab,id){
i++;
if (typeof tab[i] != 'undefined')
	{
		setTimeout(function(){Affiche(i,tab,id)},1000);
 
		var nombre = document.createTextNode(tab[i]+' ');
		document.getElementById(id).appendChild(nombre);
	}
 
}
</script>
 
	</head>
<body onload="Affiche(-1,tab_php1,'mondiv1'),Affiche(-1,tab_php2,'mondiv2'),Affiche(-1,tab_php3,'mondiv3')">
 
				<div id = "mondiv1" style="background:#FF9900"></div>
				<div id = "mondiv2" style="background:#FFCCCC"></div>
				<div id = "mondiv3" style="background:#FFFFCC"></div>
 
</body>
</html>

Le résultat de la fonction hasard() n'entre pas dans $number1, et ça l'affiche comme si je faisais un echo.

Code :

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

1
2
3
$number1 = hasard(1,10,11);
$number2 = hasard(11,20,11);
$number3 = hasard(21,30,11);

Je crois que je suis proche du but.

**ABCIWEB** · 13/03/2012, 19h00

Tu fais afficher les erreurs dans ton script ? Parce que y'en a pas mal.

Le plus simple serait que tu nous dise ce qu'est censé faire ton générateur de code aléatoire. Prendre des valeurs au hasard dans un tableau ?

Sinon faudrait que tu passe par la case départ

**dancom5** · 13/03/2012, 19h28

Envoyé par ABCIWEB

T
Prendre des valeurs au hasard dans un tableau ?

Un générateur de numéro de loterie.
C'est mon code de base que j'ai fabriqué.
Et je voulais ajouter un délai de temps de 1 secondes entre les chiffres.

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
 
<?php
function loto($start_range,$end_range,$nb_count,$loto_title){
 
	$numbers = range($start_range,$end_range);
	$rand_keys = array_rand($numbers,$nb_count);
	sort($rand_keys);
	?>
	<table class="l">
		<tr>
			<td class="ll">
				<span class="l"><?php echo $loto_title; ?></span>
			</td>
			<?php
			foreach ($rand_keys as $k=>$v) {
				srand((double)microtime()*1000000);
				echo '<td class="l">'.$numbers[$v].'</td>';
			}
			?>
			<td>
				<img class="l" src="fleche.png">
			</td>
		</tr>
	</table>
 
<?php } ?>
 
 
<?php
loto(1,49,6,"tirage1");
loto(1,49,6,"tirage2");
loto(1,49,7,"tirage3");
?>

**ABCIWEB** · 13/03/2012, 20h33

Voilà ce que tu peux faire.
Essaies de comprendre car on ne sera pas toujours là pour t'aider.

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
<?php
 
function Loterie($debut,$quantite_elements,$nb_tirage)
{
	$limite = $debut + $quantite_elements -1;
 
	// création du tableau 
	$tab = range($debut,$limite);
 
	// mélange du tableau
	shuffle($tab);
 
	// prend les $nb_tirage premiers
	$tab_tirage = array_slice($tab, 0, $nb_tirage);  
 
	return $tab_tirage;
}
 
$debut = 1;
$quantite_elements = 20;
$nb_tirage = 8;
 
$numbers1 = Loterie($debut,$quantite_elements,$nb_tirage);
 
$debut = 21;
$numbers2 = Loterie($debut,$quantite_elements,$nb_tirage);
 
$debut = 41;
$numbers3 = Loterie($debut,$quantite_elements,$nb_tirage);
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title></title>
 
<script>
var tab_php1 = <?php echo json_encode($numbers1)?>;
var tab_php2 = <?php echo json_encode($numbers2)?>;
var tab_php3 = <?php echo json_encode($numbers3)?>;
 
function Affiche(i,tab,id){
i++;
if (typeof tab[i] != 'undefined')
	{	
		setTimeout(function(){Affiche(i,tab,id)},1000);
 
		var nombre = document.createTextNode(tab[i]+' ');
		document.getElementById(id).appendChild(nombre);
	}
 
}
 
</script>
</head>
 
<body onload="Affiche(-1,tab_php1,'mondiv1'),Affiche(-1,tab_php2,'mondiv2'),Affiche(-1,tab_php3,'mondiv3')">
 
<div id = "mondiv1" style="background:#FF9900"></div>
<div id = "mondiv2" style="background:#FFCCCC"></div>
<div id = "mondiv3" style="background:#FFFFCC"></div>
 
</body>
</html>

**dancom5** · 14/03/2012, 12h39

Merci pour le coup de main.

Je ne peux pas appliquer l'effet boulier avoir mon image de la boule en arrière
des chiffres puisque ce n'est plus synchro. Avec ForEach de PHP, je pouvais
mettre mon style dans la boucle.

Maintenant, c'est séparé.

A moins que je puisse appliquer mon style dans la boucle

à quelque part dans la boucle ici:

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
<script>
var tab_php1 = <?php echo json_encode($numbers1)?>;
var tab_php2 = <?php echo json_encode($numbers2)?>;
var tab_php3 = <?php echo json_encode($numbers3)?>;
 
function Affiche(i,tab,id){
i++;
if (typeof tab[i] != 'undefined')
	{	
		setTimeout(function(){Affiche(i,tab,id)},1000);
 
		var nombre = document.createTextNode(tab[i]+' ');
		document.getElementById(id).appendChild(nombre);
	}
 
}
 
</script>

Le STYLE que j'utilisait pour les boules dans ForEach

Code :

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

1
2
3
4
5
6
7
8
9
10
          background:url(boulle.png) no-repeat center center;
          color: white;
          text-align: center;
          width: 45px;
          height: 45px;
          font-weight: bolder;
          font-size: 2em;
          font-family: serif, Arial;
          font-stretch: wider;
          font-style: normal;

La largeur c'était pour chaque boule avec le chiffre centré dedans.

shuffle() est-il aussi efficace que le random()?

délais dans une boucle entre les éléments du tableau [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager