random color sin repetir

rikukenji · #1 (**permalink**) 06/06/2012, 11:45

saludos, busco ayuda por favor si es posible:

tengo un random javascript que cambia el color de fondo por medio 8 clases css a 4 divs de forma aleatoria, me funciona pero al hacer random ciertos colores se repiten y esto es lo que NO deseo quiero que al hacer random uno sea distinto del otro aqui les dejo el codigo que tengo

AYUUUDA POR FAVOR!!

Código PHP:

  
function changeColor(element, curNumber){
    curNumber=new Array(1,2,3,4,5,6,7,8);
    curNumber++;
       curNumber=Math.floor(Math.random()*8)+1;
    element.addClass('color' + curNumber,500);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 2000);  
}

/***el css*****/
.color1{
    background-image:url(../images/black_square.png);
}

.color2{
    background-image:url(../images/blue_square.png);
}
...

/*el html*/

<div id="cuadrouno"></div>
<div id="cuadrodos"></div>
<div id="cuadrotres"></div>
<div id="cuadrocuatro"></div>

<script>
changeColor($('#cuadrouno'), 0);
changeColor($('#cuadrodos'), 0);
changeColor($('#cuadrotres'), 0);
changeColor($('#cuadrocuatro'), 0);
</script>

America|UNK · #2 (**permalink**) 06/06/2012, 12:11

Declara un array global que ingresa los colores de random que se están utilizando, en el script verificas si el color está en el array, así obtienes uno nuevo.

rikukenji · #3 (**permalink**) 06/06/2012, 12:14

Gracias America|UNK por tu pronta respuesta de hecho eso pienso que hay que hacer pero no soy un erudito en javascript y no se como hacerlo, me podrias explicar como? si es asi MUUCHAS GRACIAS!!

Lynxcraft · #4 (**permalink**) 06/06/2012, 12:49

Código:

<script type="text/javascript">
var list = new Array();
function changeColor(element){
	if(!list.length){
		list=new Array(1,2,3,4,5,6,7,8);
		list.sort(function() {return 0.5 - Math.random()})
	}
    var curNumber = list.shift();
    element.addClass('color' + curNumber);
    setTimeout(function(){changeColor(element)}, 2000);  
}
</script>


<script type="text/javascript">
changeColor($('#cuadrouno'));
changeColor($('#cuadrodos'));
changeColor($('#cuadrotres'));
changeColor($('#cuadrocuatro'));

</script>

Si te sirve

rikukenji · #5 (**permalink**) 06/06/2012, 13:40

Amigo muchas gracias por tu interes pero lamentablemente no me funciona; llega un momento determinado en que todos se ponen de un solo color y no rueda (funca) mas

America|UNK · #6 (**permalink**) 06/06/2012, 13:42

Hola, hice una modificación en tu script, no se si es válido para lo que estás haciendo, ya no se repiten los colores.

Código Javascript:

Ver originalfunction changeColor(){
 
    var numbers = [], i = 0, arg = arguments
    while(arg[i]){
        while(curNumber = Math.floor( Math.random() * 8 ) + 1)
            if(!numbers[curNumber]) break
        numbers[curNumber] = true
        arg[i++].attr('class', 'color' + curNumber)
    }
    setTimeout(function(){changeColor.apply(this,arg)}, 1000) 
}
 
changeColor($('#cuadrouno'),$('#cuadrodos'),$('#cuadrotres'),$('#cuadrocuatro'))
&#8203;

Resultado: http://jsfiddle.net/wZVanG/hvqyD/

marlanga · #7 (**permalink**) 06/06/2012, 15:00

Código javascript:

Ver original<html>
    <head>
        <script>
            Array.prototype.mezclar= function() {
                var n=this.length;
                while(n--)
                {
                    var i=Math.floor(n*Math.random());
                    var tmp =this[i];
                    this[i]=this[n];
                    this[n]=tmp;
                }
                return this;
            }
            function cambiaClase(elem,cls){
                var nElem=elem.length;
                var nCls=cls.length;
                var elemento;
                cls.mezclar();
                for(var i=0;i<nElem;i++)
                {
                    document.getElementById(elem[i]).setAttribute("class",cls[i%nCls]);
                }
            }
            window.onload=function(){
                var elementos=["cuadrouno","cuadrodos","cuadrotres","cuadrocuatro"];
                var classes=["color1","color2","color3","color4","color5","color6","color7","color8"];
                cambiaClase(elementos,classes);
                
                var elementos2=["cuadroa","cuadrob","cuadroc","cuadrod","cuadroe","cuadrof","cuadrog"];
                var classes2=["color1","color3","color8"];
                cambiaClase(elementos2,classes2);
            };
        </script>
        <style>
            .color1 { background-color:red; }
            .color2 { background-color:blue; }
            .color3 { background-color:orange; }
            .color4 { background-color:green; }
            .color5 { background-color:pink; }
            .color6 { background-color:yellow; }
            .color7 { background-color:black; }
            .color8 { background-color:grey; }
        </style>
    </head>
    <body>
        <div id="cuadrouno">1</div>
        <div id="cuadrodos">2</div>
        <div id="cuadrotres">3</div>
        <div id="cuadrocuatro">4</div>
        
        <br/><br/>
        
        <div id="cuadroa">a</div>
        <div id="cuadrob">b</div>
        <div id="cuadroc">c</div>
        <div id="cuadrod">d</div>
        <div id="cuadroe">e</div>
        <div id="cuadrof">f</div>
        <div id="cuadrog">g</div>
    </body>
</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

[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.

rikukenji · #8 (**permalink**) 06/06/2012, 15:18

marlanga, muchas gracias

nos puede servir, probaremos la primera parte con un timeout haber que pasa cualquier cosa te mantendremos informado GRACIAS NUEVAMENTE

rikukenji · #9 (**permalink**) 08/06/2012, 09:04

hola marlanga, que tal te comento que no he tenido suerte con el script que me pasaste que al decir verdad esta de LUJO, no se si fuera posible hacer en este mismo script hacer que cambien dinamicamente los colores pasando cierto tiempo (setTimeout), es posible hacerlo?

marlanga · #10 (**permalink**) 08/06/2012, 14:02

http://jsfiddle.net/YDJLL/5/

rikukenji · #11 (**permalink**) 11/06/2012, 07:03

¡ERES UN DIOSSSS!, donde quieres que te haga el altar?

MUCHISIMAS GRACIAS BRO!, LA VERDAD MUCHISIMAS GRACIAS ERES UN GRANDE

jlx4 · #12 (**permalink**) 10/10/2012, 21:42

Marlanga por casualidad conoces algún enlace o algún script de un carrusel de imágenes que sea aleatorio, me refiero a que al momento de cargar la página no muestre siempre las mismas imágenes y de ahí siga su recorrido?, y posiblemente si cada imagen posee su propio link independiente y su title independiente también?, ando buscando alguno y todos al momento de cargar la página comienzan igual xD.

IsaBelM · #13 (**permalink**) 11/10/2012, 04:47

hace poco se trató ese tema

jlx4 · #14 (**permalink**) 11/10/2012, 12:33

lo sé, pero, me refería a si conocen algún script carrusel que sea aleatorio, el script aleatorio no es difícil, pero realizar todo el carrusel, en lo personal, me llevaría tiempo.

IsaBelM · #15 (**permalink**) 11/10/2012, 16:05

ahora me doy cuenta que tu abristes este tema. si hubieras hecho el esfuerzo de intentar entender al código que te dejó emprear y especialmente esta parte

Cita:

var mezclar = function(n){
for(var j, x, i = n.length; i; j = parseInt(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);

return n;
}

corrigiendo lo mencionado a continuación, ya sabrías como barajar el orden de los elementos del array. si además usas el método createElement() para crear las imágenes y, ya el culmen, si usas la etiqueta html <marquee>, .......

jlx4 · #16 (**permalink**) 11/10/2012, 16:19

Gracias IsabelM, pero el código de emprear no es el problema, de hecho lo entiendo, y se lo agradezco, se asemeja un poco al que subí al inicio del tema, pero, a lo que me refería es si existía un carrusel ya creado y yo modificar el script a lo que necesito, ya que no soy un gran experto en el tema crear uno desde cero me tomaría mucho tiempo, y no cuento con ello en este momento, a decir verdad, hace años que no volvía a retomar el diseño y desarrollo web xD, no recordaba para nada la etiqueta <marquee>, te lo agradezco, ahora si lo podré hacer de forma rápida sin necesidad de un script como base.

. Gracias nuevamente.

IsaBelM · #17 (**permalink**) 11/10/2012, 17:14

me he acordado que con respecto al carrusel este viejo código te será útil

jlx4 · #18 (**permalink**) 11/10/2012, 17:33

Te lo agradezco, de verdad muchas gracias.