Affichage aléatoire de 4 div

**Erwan31** · 14/02/2012, 12h59

Bonjour,
je souhaiterais afficher 4 div aléatoirement (à chaque nouveau chargement de page) parmi 16 div.
Y a-t-il une fonction JS qui puisse faire ça? Un tuto?

**ticroch** · 14/02/2012, 13h51

ba ce serait plus cote serveur que tu fais ca, tu sélectionne tes 4 divs aléatoirement et tu les écrit sur l'output.

Sinon en JavaScript, il faut que tu caches tous tes divs sauf les 4 que tu choisis aléatoirement... pas génial comme méthode je trouve ..

**javatwister** · 14/02/2012, 14h26

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
 
<style type="text/css">
 
div.alea {
	float:left;
	width:40px;
	height:40px;
	font-weight:bold;
	font-size:30px;
	text-align:center;
	border:1px solid;
	background-color:red;
}
 
#cadre {
	margin:100px;
}
 
</style>
 
 
 
</head>
<body>
 
<div id="cadre"></div>
 
<script type="text/javascript">
 
var tab=[], tab2=[], h, d;
 
for(j=0;j<16;j++){
	tab[j]=j
}
 
for(i=0;i<4;i++){
 
	h=Math.floor(Math.random()*tab.length);
	tab2[i]=tab[h];
	tab.splice(h,1)
	d=document.createElement("div");
	d.className="alea";
	d.appendChild(document.createTextNode(tab2[i]));
	document.getElementById("cadre").appendChild(d)
}
 
 
 
 
</script>
 
</body>
</html>

**Erwan31** · 14/02/2012, 18h07

Envoyé par javatwister

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>...</title>
 
 
<style type="text/css">
 
div.alea {
	float:left;
	width:40px;
	height:40px;
	font-weight:bold;
	font-size:30px;
	text-align:center;
	border:1px solid;
	background-color:red;
}
 
#cadre {
	margin:100px;
}
 
</style>
 
 
 
</head>
<body>
 
<div id="cadre"></div>
 
<script type="text/javascript">
 
var tab=[], tab2=[], h, d;
 
for(j=0;j<16;j++){
	tab[j]=j
}
 
for(i=0;i<4;i++){
 
	h=Math.floor(Math.random()*tab.length);
	tab2[i]=tab[h];
	tab.splice(h,1)
	d=document.createElement("div");
	d.className="alea";
	d.appendChild(document.createTextNode(tab2[i]));
	document.getElementById("cadre").appendChild(d)
}
 
 
 
 
</script>
 
</body>
</html>

Ok, merci c'est sympa mais ça ne fonctionne qu'avec des chiffre générés dynamiquement ici.
Or il se trouve que j'ai 16 LI (te non pas div) chacun avec un contenu unique (image+ texte). C'est à quel niveau que je dois agir? (je suis novice en JS)

PS: je ne peux faire ça qu'en JS et pas côté serveur.

**javatwister** · 14/02/2012, 18h28

par exemple

Code :

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

document.getElementById("cadre").getElementsByTagName("li")[tab2[i]].style.display="block";

à la place de

Code :

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

1
2
3
4
d=document.createElement("div");
d.className="alea";
d.appendChild(document.createTextNode(tab2[i]));
document.getElementById("cadre").appendChild(d)

sachant que tes li sont tous écrits en dur dans le cadre "cadre", avec un display:none;

**Erwan31** · 15/02/2012, 01h45

Merci mais ça n'affiche aucun li. J'ai mis le display:none dans une CSS externe mais a priori je pense pas que le problème vienne de là?

J'ai essayé avec un autre code :

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
var randNum, boucle = 0;
 
var listImgLength = $('#temoi li').length;
 
 
 
while (boucle != 4) {
 
	randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
 
	if ($('#temoi li').eq(randNum-1).css('display') == 'none' ) {
 
		$('#temoi li').eq(randNum-1).show();
 
		boucle++;
 
	}
 
}

Mais ça marche pas non plus !

Affichage aléatoire de 4 div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager