Ver Mensaje Individual
  #7 (permalink)  
Antiguo 06/06/2012, 15:00
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 10 meses
Puntos: 206
Respuesta: random color sin repetir

Código javascript:
Ver original
  1. <html>
  2.     <head>
  3.         <script>
  4.             Array.prototype.mezclar= function() {
  5.                 var n=this.length;
  6.                 while(n--)
  7.                 {
  8.                     var i=Math.floor(n*Math.random());
  9.                     var tmp =this[i];
  10.                     this[i]=this[n];
  11.                     this[n]=tmp;
  12.                 }
  13.                 return this;
  14.             }
  15.             function cambiaClase(elem,cls){
  16.                 var nElem=elem.length;
  17.                 var nCls=cls.length;
  18.                 var elemento;
  19.                 cls.mezclar();
  20.                 for(var i=0;i<nElem;i++)
  21.                 {
  22.                     document.getElementById(elem[i]).setAttribute("class",cls[i%nCls]);
  23.                 }
  24.             }
  25.             window.onload=function(){
  26.                 var elementos=["cuadrouno","cuadrodos","cuadrotres","cuadrocuatro"];
  27.                 var classes=["color1","color2","color3","color4","color5","color6","color7","color8"];
  28.                 cambiaClase(elementos,classes);
  29.                
  30.                 var elementos2=["cuadroa","cuadrob","cuadroc","cuadrod","cuadroe","cuadrof","cuadrog"];
  31.                 var classes2=["color1","color3","color8"];
  32.                 cambiaClase(elementos2,classes2);
  33.             };
  34.         </script>
  35.         <style>
  36.             .color1 { background-color:red; }
  37.             .color2 { background-color:blue; }
  38.             .color3 { background-color:orange; }
  39.             .color4 { background-color:green; }
  40.             .color5 { background-color:pink; }
  41.             .color6 { background-color:yellow; }
  42.             .color7 { background-color:black; }
  43.             .color8 { background-color:grey; }
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="cuadrouno">1</div>
  48.         <div id="cuadrodos">2</div>
  49.         <div id="cuadrotres">3</div>
  50.         <div id="cuadrocuatro">4</div>
  51.        
  52.         <br/><br/>
  53.        
  54.         <div id="cuadroa">a</div>
  55.         <div id="cuadrob">b</div>
  56.         <div id="cuadroc">c</div>
  57.         <div id="cuadrod">d</div>
  58.         <div id="cuadroe">e</div>
  59.         <div id="cuadrof">f</div>
  60.         <div id="cuadrog">g</div>
  61.     </body>
  62. </html>

Ejemplo en vivo:
http://jsfiddle.net/YDJLL/3/

Tiene dos modos de funcionar. Si el número de clases que le pasas en el array es menor o igual que el número de elementos donde meter esas clases, hará lo que tú has pedido. Meterá sin repetir una clase al azar en cada elemento. Es lo que pasa en el ejemplo 1.

Pero ya que estamos, si el número de clases es menor que el número de elementos, lo que hará será meter las clases al azar en los primeros N elementos (N es el número de clases que le has pasado). Después repetirá dicha secuencia de color con el resto de elementos que queden.
Es lo que se ve en el ejemplo 2.


Cita:
Iniciado por Lynxcraft Ver Mensaje
[CODE]<script type="text/javascript">
var list = new Array();
list=new Array(1,2,3,4,5,6,7,8);
list.sort(function() {return 0.5 - Math.random()});
Ey paisano. Ese sort no está bien balanceado. Con arrays pequeños quizás no se note, pero cuando crezcan, no se mezclará bien.

Última edición por marlanga; 06/06/2012 a las 15:10