How to randomly color DIVs with a color Array in javascript?

Question

How to randomly color DIVs with a color Array in javascript?

Navigation

#1 by (7 votes)
#2 by (5 votes)
#3 by (1 votes)

16

I created a function that exchanges colors (pulled from an array ) in certain elements of the page (which are also in array ), changing the colors of the elements one after another. I wanted to do something different, like: Sort the element and color that will be modified. How do I adapt my role to do this?
Example - > link

window.onload = function(){
    var box = document.getElementsByClassName('box');
    var background = ["#f36", "#C3C", "#fc0", "#FC6", "#9C0"];
    cor=0;
    div=0;
    setInterval(function(){
            box.item(div).style.backgroundColor = background[cor];
            cor++; div++;
            if(cor>=background.length){
                cor=0;}
            if(div>=box.length){
                div=0;}
        },2000)
}

javascript array

asked by anonymous 14.02.2014 / 15:39

3 answers

5

You can use Math.random ()

var arrCores = ['#f00', '#0f0', '#0ff'];

setInterval(function(){
    document.getElementById('divRandom').style.backgroundColor = arrCores[Math.round(Math.random()*(arrCoresSize-1))]
}, 500);

jsFiddle

Colors that do not repeat themselves

var arrCores = ['#f00', '#0f0', '#0ff'];
var arrCoresUsadas = [];

setInterval(function(){
    // Define cor aleatória
    var index = Math.round(Math.random() * (arrCores.length-1));
    document.getElementById('divRandom').style.backgroundColor = arrCores[index];

    // Marca cor como usada
    arrCoresUsadas.push(arrCores[index]);
    arrCores.splice(index, 1);

    // Todas as cores usadas, começa tudo de novo:
    if (arrCores.length === 0){
        arrCores = arrCoresUsadas;
        arrCoresUsadas = [];
    }
}, 500);

jsFiddle

In these cases, I'm hoping that the array contains elements ... By preaching, there could be some if's to avoid errors if the arrays might be empty for some reason.

14.02.2014 / 15:47

1

Answer:

You can randomize a hexadecimal color using Math.floor() and Math.random() this way:

var corRandom = '#'+Math.floor(Math.random()*16777215).toString(16);

Explanation:

A color in hexadecimal should start with the charactere '#' so concatenation, before generating the random function, calculating to get a result of a hexadecimal and being converted to String using toString() .

You should not, you do not need to use an Array to store the colors, since they can be generated.

Your code would look this way using this method quoted above:

var box = document.getElementsByClassName('box');
div=0;
setInterval(function(){
        box.item(div).style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
        div++;
        if(div>=box.length){
            div=0;
        }
    },2000);

Example running on JSFiddle

14.02.2014 / 16:07

Security - Syscall inside shellcode does not execute How to use Qt translations directly with QApplication :: tr ()

score 7 · Accepted Answer

I imagine what you want is this:

window.onload = function(){
    var box = document.getElementsByClassName('box');
    var background = ["#f36", "#C3C", "#fc0", "#FC6", "#9C0"];
    cor=0;
    div=0;
    setInterval(function(){
            cor = Math.floor(Math.random() * (background.length - 1));
            div = Math.floor(Math.random() * (background.length - 1));
            box.item(div).style.backgroundColor = background[cor];
        },2000)
}

If you do not want to repeat the colors, you can do the following: (Remember that this can be done for div also)

var coresQueNaoForam = [0,1,2,3,4];
window.onload = function(){
    var box = document.getElementsByClassName('box');
    var background = ["#f36", "#C3C", "#fc0", "#FC6", "#9C0"];
    cor=0;
    div=0;
    setInterval(function(){
            cor = Math.floor(Math.random() * (coresQueNaoForam.length - 1));
            div = Math.floor(Math.random() * (background.length - 1));
            box.item(div).style.backgroundColor = background[coresQueNaoForam.splice(cor,1)];
            if(coresQueNaoForam.length == 0){
              coresQueNaoForam = [0,1,2,3,4];
            }              
        },2000)
}