1

我有一个部分十六进制值的数组，这些值将随机字母附加到它们上，形成一个完整的十六进制值。

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

如果你强制var color = setHex();使用getRandomColor函数，你会看到我想要的效果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();
4

3 回答 3

3 
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;
}

在方法之外声明基数是可行的。例子

解释

在这种方法中：

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

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

因此，通过移出setHex()该循环内的方法，base您实际上setHex()每次加载只调用一次。

于 2013-02-21T16:45:44.983 回答
2

为什么？因为函数getRandomColor()调用setHex()每次都会返回其他内容。

如何停止？

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

和

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

    for (var i = 0; i < 3; i++ ) {
        color += letters[Math.round(Math.random() * 7)];
    }
    return color;
}
于 2013-02-21T16:50:32.780 回答
0

每次您打电话时，getRandomColor您都是在打电话setHex并选择另一种随机基色。只需设置一次基色，将其存储在变量中并使用它。

例如：

var hexBase;

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

小提琴

似乎您已经接近此解决方案，因为您将 setHex 的结果存储在 div 中，但您再也没有检查过它。此外，当您可以将它们存储在 JavaScript 中时，您不需要将它们存储在 DOM 中。

最后，如果您想避免使用全局变量，您可以将整个事物包装在一个函数中（例如您的onload函数或 IIFE）。

于 2013-02-21T16:50:32.230 回答