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

Version imprimable

20/03/2013, 13h03
theophile76

Avoir 5 div mais 1 seule qui charge de façon aléatoire
Bonjours alors voilà j'ai 5 div avec des contenus differents comme ceci :
Code:

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.
20/03/2013, 13h57
Bovino

Heu... Iframe lien "src" aléatoire :roll:
20/03/2013, 14h03
theophile76

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/

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

Sinon pour ton problème teste ça :

Code:

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:

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 ;)

20/03/2013, 16h14
theophile76

Citation:

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 :)

Oui enfin il y a moyen de faire plus simple

Code:

1
2
3
4
 
div {
    display:none;
}

Code:

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

21/03/2013, 00h56
dragonno

Effectivement ;)
J'avais précisé que ma méthode n'était pas la meilleure, et qu'en passant par le DOM on pouvait mieux faire mais c'est la méthode qui m'est venue le plus facilement en tête, pour la meilleure méthode il aurait fallu que je fasse quelques recherches sur le Dom ;)

En tous cas l'idéal cette méthode de Macmillenium ;)

Tu pourras utiliser ma méthode pour autre chose, le jour où tu voudra activer un truc parmi plusieurs sans rechargement de la page.

PS: Theophile, pense au bouton "Résolu" ;)