javascript - 配列からのランダムカラー

Question

与えられた16進色の配列からランダムな値（background-color）を選び、それを与えられたdiv要素に適用するJavaScriptを使って何かを構築しようとしています。

誰かがこれを行うための良い方法を知っていますか？私には何も機能していないようですが、私は実際にはJSに精通している人ではありません。

Answer 1

これはどう？

var rgb = [];

for(var i = 0; i < 3; i++)
    rgb.push(Math.floor(Math.random() * 255));

myDiv.style.backgroundColor = 'rgb('+ rgb.join(',') +')';

既知の色に限定したい場合は、色の配列を作成し、そのようにランダムに選択できます。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

myDiv.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

JSFiddle

更新- 最初の方法を使用してすべてに適用します.post-content。

var divs = document.querySelectorAll('.post-content');

for(var i = 0; i < divs.length; i++)
    divs[i].style.backgroundColor = 'rgb('+ rgb.join(',') +')';

.post-contentそれぞれに個別にランダムな背景を適用したい場合は、これを行います。

var divs = document.querySelectorAll('.post-content');

for(var i = 0; i < divs.length; i++) {
    var rgb = [];

    for(var i = 0; i < 3; i++)
        rgb.push(Math.floor(Math.random() * 255));

    divs[i].style.backgroundColor = 'rgb('+ rgb.join(',') +')';
}

最終更新- あなたが言及したように、jQueryを使用しています。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

$('.post-content').each(function() {
    $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
});

Answer 2

この例では、任意の配列からランダムなアイテムを返します。偽でない引数を渡すと、配列からアイテムが削除されます。

Array.prototype.getRandom= function(cut){
    var i= Math.floor(Math.random()*this.length);
    if(cut && i in this){
        return this.splice(i, 1)[0];
    }
    return this[i];
}

//サンプル：

var colors= ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 
'lime', 'maroon', 'navy', 'olive', 'orange', 'purple', 'red', 
'silver', 'teal', 'white', 'yellow'];

アラート (colors.getRandom());