随机bg颜色，每次刷新时都会发生变化

Question

我每页有9个块，我想随机更改它的背景色，使用相同的类(可以使用一个类吗？)每块应该有不同的bg颜色。

例如：

block1 = red
block2 = yellow
block3 = green

以此类推。

我尝试过这样的代码：(同时打印相同的颜色)

var colors = ["#99B3FF", "#799979", "#1E1E1E"],
selectedColor = colors[Math.floor(Math.random() * colors.length)];

header = $(".recent-posts-body");
header.css("background-color", selectedColor);

我不知道如何使用js实现这一点。

Answer 1

您必须遍历每个块并分配颜色：

var colors = ["#99B3FF", "#799979", "#1E1E1E"],
header = $(".recent-posts-body");
$.each( head, function(idx, obj) {
    selectedColor = colors[Math.floor(Math.random()*colors.length)];
    obj.css("background-color", selectedColor);
});

上述代码不能保证每个块具有与以前块不同的颜色，但是颜色是从数组中随机选择的。

Answer 2

看看这里：http://jsfiddle.net/5XUST/2/

码

var colors = ["#99B3FF", "#799979", "#1E1E1E", "#AAA", "#FFF", "#CCC"];

var blocks = $(".block");
for(var x = 0; x < blocks.length; x++){
    var random = Math.floor(Math.random() * colors.length);
    var selectedColor = colors[random];
    $(blocks[x]).css("background-color", selectedColor ).html(selectedColor);
    colors.splice(random, 1);
}

每次一个div得到一个背景颜色，这个颜色会从开始时被移除，这样相同的颜色就不会再次出现。希望它能帮上忙

Answer 3

var colors = ["#99B3FF", "#799979", "#1E1E1E"];

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

还有小提琴：http://jsfiddle.net/eithe/LY2FQ/