Avoir 5 div mais 1 seule qui charge de façon aléatoire

**theophile76** · 20/03/2013, 13h03

Bonjours alors voilà j'ai 5 div avec des contenus differents comme ceci :

Code html :

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

1
2
3
4
5
<div>Contenu 1</div>
<div>Contenu 2</div>
<div>Contenu 3</div>
<div>Contenu 4</div>
<div>Contenu 5</div>

Je voudrais qu'au chargement de la page il n'y en ai qu'une qui charge mais de façon aléatoire.
Je pense qu'il faut utiliser un display:none avec un code javascript mais je n'ai rien trouvé nul part.
Donc si vous aviez des idées, merci.

**Bovino** · 20/03/2013, 13h57

Heu... Iframe lien "src" aléatoire

**theophile76** · 20/03/2013, 14h03

Non avec les iframe ça ne vas pas en fait.
J'ai essayé ceci mais ça ne fonctionne pas :

http://jsfiddle.net/devinkoncar/RJMhT/1060/

**dragonno** · 20/03/2013, 15h18

Mais pourquoi ce n'est pas plutôt un seul div avec un contenu aléatoire ?

Sinon pour ton problème teste ça :

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
Function aleatoire()
{
   N=Math.random(); // chiffre aléatoire entre 0 et 1.
   var alea=Math.round(N*3); // Multiplié par 4 et arrondi.
   // Sélectionne le Div aléatoirement.
   obj=document.getElementById("A").style.display="none";
   obj=document.getElementById("B").style.display="none";
   obj=document.getElementById("C").style.display="none";
   obj=document.getElementById("D").style.display="none";
 
   switch(alea)
   {
   case 0:obj=document.getElementById("A").style.display="block";
   case 1:obj=document.getElementById("B").style.display="block";
   case 2:obj=document.getElementById("C").style.display="block";
   case 3:obj=document.getElementById("D").style.display="block";
   }
}

Code html :

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

1
2
3
4
5
6
7
8
<Body onload="aleatoire()">
 
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>
 
</body>

Normalement on optimise en passant par le DOM en cherchant tous les noeuds etc mais j'ai pas voulu m’embêter, à toi d'optimiser si ça te dit

**theophile76** · 20/03/2013, 16h14

Mais pourquoi ce n'est pas plutôt un seul div avec un contenu aléatoire ?

Oui bien sûr ça peut être ça aussi, le résultat et le même surtout si c'est plus facile à mettre en place.

Merci je vais essayer ce que tu me propose

**Macmillenium** · 20/03/2013, 17h50

Oui enfin il y a moyen de faire plus simple

Code css :

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

1
2
3
4
 
div {
    display:none;
}

Code javascript :

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

1
2
3
4
5
 
var els = document.getElementsByTagName("div"), 
    r = Math.floor(els.length * Math.random());
 
els[r].style.display="block";

Avoir 5 div mais 1 seule qui charge de façon aléatoire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager