Установить случайные цвета фона для нескольких div

Question

Установить случайные цвета фона для нескольких div

0

У меня есть несколько 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]);

user2989731 22 янв. 2014, в 18:55

Источник

Теги:

javascript

jquery

4 ответа

2

Вы определенно находитесь на правильных строках, но можете упростить свой цикл и использовать функцию.each() для перебора всех элементов $('.content-block') на вашей странице. Вы alos только устанавливаете случайный цвет один раз, так что вы можете переместить это в каждую функцию:

$('.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]);
});

ediblecode 22 янв. 2014, в 14:54

0

Это не работает, потому что нет «фонового» массива. Вам нужно изменить его на «цвета». И это будет по-прежнему использовать один и тот же случайный цвет для каждого div.
brouxhaha 22 янв. 2014, в 17:37

0

Он будет работать на 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>

Manoj 24 июнь 2019, в 00:08

0

изменить это

contentBlock.addClass(colors[randomColor]);

к этому:

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

Надеюсь, поможет.

Hugo S. Mendes 22 янв. 2014, в 16:07

Ещё вопросы

Это не работает, потому что нет «фонового» массива. Вам нужно изменить его на «цвета». И это будет по-прежнему использовать один и тот же случайный цвет для каждого div.

Bic · Accepted Answer · 2014-01-22T15-34-00.000Z

Похоже, проблема может заключаться в том, как вы увеличиваете свой случайный цвет:

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

Вы уже приняли ответ, но вот демо Fiddle