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

Question

我有一个包含部分十六进制值的数组，这些值会附加随机字母以形成完整的十六进制值。

然后将这些随机应用于 div 层，有效地为它们着色不同的颜色。然而，我目前得到的是“马蒂斯”效果，而不是一种颜色的变化。

如果您在 getRandomColor 函数中将 var color = setHex(); 强制为 var color = '#CC0';，您将看到我想要的效果。

我想知道为什么当我应该只传递一个十六进制值时会出现“马蒂斯”效应。我该如何阻止它？

查看示例: 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;
}

在方法之外声明基础是可行的。 Example

---

解释

在这个方法中:

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

您在该循环中重复调用 getRandomColor()。因此，您还反复调用 setHex()，每次循环都会创建一种新的随机颜色。

因此，通过将 setHex() 移动到该循环内的方法之外，进入 base 您实际上每次只调用一次 setHex()加载。