数组的随机颜色

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)]);
});