1

完全な16進値を形成するランダムな文字が追加される部分的な16進値の配列があります。

次に、これらはdivレイヤーにランダムに適用され、さまざまな色で効果的にシェーディングされます。しかし、私が現在得ているのは、1つの色のバリエーションではなく、「マティス」効果です。

getRandomColor関数を強制的に実行すると、私が求めている効果が表示されvar color = setHex();ますvar color = '#CC0';。

1つの16進値のみを渡す必要があるのに、なぜ「Matisse」効果が発生するのか知りたいです。これを止めるにはどうすればよいですか？

ここの例を参照してください：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()そのループ内にあるメソッドの外側に移動することにより、ロードごとに1回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 に答える