javascript - 数组中的随机颜色

Question

我正在寻找使用 JavaScript 构建的东西，它将从给定的十六进制颜色数组中选择一个随机值（背景颜色）并将其应用于给定的 div 元素。

有人知道这样做的好方法吗？似乎没有什么对我有用，但我并不是一个真正精通 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

此示例从任何数组返回一个随机项目，如果您传递一个非 falsey 参数，它将从数组中删除该项目。

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（））；

Answer 3

不确定这在性能方面有多好，但如果您已经在使用 lodash，它可以很简单：

// initialising array of colours
let colours = ['tomato', 'salmon', 'plum', 'olive', 'lime', 'chocolate']

// getting a random colour
colours = _.shuffle(colours); // you can shuffle it once, or every time
let hereIsTheColour = colours.pop() // gets the last colour from the shuffled array (also removes it from the array)

Answer 4

let hue = 0;
    let colors = []
    for (let j = 0; j < 10; j++) {
        let color = "hsl(" + hue + ",100%,50%)"      
        colors.push(color)      
        hue += 500
    }
    console.log(colors)