Question

我在页面上有多个div，我想为其分配随机背景颜色。如果可能的话，颜色不应该重复，除非我的颜色用完了。我已经设法使用数组中的随机颜色加载div容器，但是对于所有剩余的div，颜色总是相同的。如果背景颜色已被另一个div使用，我可以做些什么来将背景颜色设置为不同的值吗？

这是我到目前为止（非工作）

function shuffleColors() {
    var colors = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
    var randomColor = Math.floor(Math.random()*colors.length);
    // var randomColor = colors[Math.floor(Math.random()*colors.length)];
    var contentBlock = $('.content-block');

    for (var i = 0; i < contentBlock.length; i++) {

        if (colors[i] == colors[randomColor]) {
            colors[randomColor]++
            contentBlock.addClass(colors[randomColor]);
        }

    }
}

shuffleColors();

下面的代码展示了我如何设法选择随机背景颜色，但所有div的颜色相同

var background = ["bg-red", "bg-green", "bg-purple", "bg-blue"];
var randomColor = Math.floor(Math.random()*background.length);           

$('.content-block').addClass(background[randomColor]);

Answer 1

您肯定是正确的，但您可以简化循环并使用.each()函数迭代页面上的所有$('.content-block')元素。您只需将随机颜色设置一次，因此您可以将其移动到每个函数中：

$('.content-block').each(function(i, el) {
    var randomColor = Math.floor(Math.random()*background.length);
    $(el).addClass(background[randomColor]);
});

我也意识到你可能希望每个$('.content-block')与另一个颜色不同。在这种情况下，您希望每次指定颜色时从colors中删除颜色：

function getRandomColour() {
    var randomNumber = Math.floor(Math,random()*colors.length();
    var randomColour = colors[randomNumber];
    var colourPosition = colors.indexOf(randomColour);

    colours.splice(colourPosition, 1); // Remove colour from array

    return randomColour;    
}

$('.content-block').each(function(i, el) {
    $(el).addClass(background[randomColor]);
});

Answer 2

看起来问题可能在于如何增加随机颜色：

colors[randomColor]++

这不是正确的方法。您可能只想增加数组中的索引：

randomColor++

您还需要确保您处于颜色数组的范围内。我建议使用mod（％）：

randomColor = (randomColor + 1) % colors.length

使用jQuery循环，你会有一些像：

$(".content-block").each(function () {
    $(this).addClass(colors[randomColor]); // assign the color
    randomColor = (randomColor + 1) % colors.length; // step to the next color; this will loop to the beginning thanks to mod
});

Answer 3

更改此

contentBlock.addClass(colors[randomColor]);

到此：

contentBlock[i].addClass(colors[randomColor]);

希望它有所帮助。

Answer 4

它将使用100％的纯Java脚本制作。

for (var i = 0; i <= 5; i++) {
		var r = Math.floor(Math.random()*255);
		var g = Math.floor(Math.random()*255);
		var b = Math.floor(Math.random()*255);
		var div = document.getElementsByClassName("div")[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
}

div {
	width: 200px;
	height:200px;
	display: inline;
	float: left;
	margin: 15px;
	background-color: red;
}

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

为多个div设置随机背景颜色

4 个答案: