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

**dragonno** · 21/03/2013, 00h56

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"

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

JavaScript

Discussions similaires

Partager

Partager