Question

我每页有9个块，我想用同一个类随机改变它的背景颜色（是否可以使用一个类？）并且每个块的颜色应该不同。

例如：

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

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/

Answer 3

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

<强> CODE

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获得背景颜色时，此颜色都会从开始处移除，因此相同的颜色不会再次出现。希望它有所帮助

随机bg颜色，每次刷新都会改变

3 个答案: