Javascript数组-如何选择一个随机的十六进制值？

Question

I have an Array of partial hex values that get random letters appended to them forming a full hex value.

These are then randomly applied to div layers effectively shading them different colors. However what I get currently is a "Matisse" effect instead of variations of one color.

If you force var color = setHex(); to var color = '#CC0'; in the getRandomColor function you will see the effect I am after.

I want to know why the "Matisse" effect is happening when I should only be passing one hex value. How do I stop this?

See example here: http://jsfiddle.net/fyQhg/

// Set Hex

function setHex() {

var hexArray = ['#CC0','#FF9','#339'];
var randomHex = hexArray[Math.floor(Math.random() * hexArray.length)];

document.getElementById('inner').innerHTML = randomHex;

return randomHex;

}

// random color
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');

var color = setHex();
for (var i = 0; i < 3; i++ ) {
    color += letters[Math.round(Math.random() * 7)];
}
return color;
}

//ditribute random colors
function buttonClick() {

var i,j, colorblock = document.getElementsByClassName('shade');
    for (i=0, j=colorblock.length; i<j; i++) {
            colorblock[i].style.background = getRandomColor();
        }   
    }

    window.onload = buttonClick();

Answer 1

var base = setHex();
// random color
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = base;   

    for (var i = 0; i < 3; i++ ) {
            color += letters[Math.round(Math.random() * 7)];
    }

    return color;
}

Declaring the base outside of the method works. Example

---

Explaination

In this method:

 for (i=0, j=colorblock.length; i<j; i++) { colorblock[i].style.background = getRandomColor(); } 

You are calling getRandomColor() repeatedly in that loop. Therefore you are also calling setHex() repeatedly which is creating a new random color each time the loop loops.

So by moving setHex() outside the method that is inside that loop into base you are effectively only calling setHex() once per load.

Answer 2

Why? Because function getRandomColor() calls setHex() which returns something else every time.

How to stop?

var color = setHex();
for (i=0, j=colorblock.length; i<j; i++) {
        colorblock[i].style.background = getRandomColor(color);
    }   
}

and

function getRandomColor(color) {
    var letters = '0123456789ABCDEF'.split('');

    for (var i = 0; i < 3; i++ ) {
        color += letters[Math.round(Math.random() * 7)];
    }
    return color;
}

Answer 3

Every time you call getRandomColor you are calling setHex and picking another random base color. Just set the base color once, store it in a variable and use it.

For example:

var hexBase;

function setHex() {
    var hexArray = ['#CC0','#FF9','#339'];
    if (!hexBase) {
         hexBase = hexArray[Math.floor(Math.random() * hexArray.length)];
    }
    return hexBase; 
} 

Fiddle

It seems you were close to this solution because you were storing the result of setHex in a div, but you never checked it again. Also, you shouldn't need to store things in the DOM when you can just store them in JavaScript.

Finally, if you want to avoid the global variable, you can wrap the whole thing in a function (eg your onload function or a IIFE).