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

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

改变这个

contentBlock.addClass(colors[randomColor]);

到这里：

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

希望对你有帮助。

Answer 3

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

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 4

它将 100% 工作，并且由纯 Javascript 制成。

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>