Выбор случайного цвета для блока с помощью jQuery. Описание скрипта на JavaScript, генерирующего блоки случайного цвета при нажатии кнопки.
HTML-разметка и CSS-стили
HTML-разметка включает кнопку «Добавить блок» и контейнер для блоков:
<!DOCTYPE html>
<html>
<head>
<title>Случайные блоки</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="addBlock">Добавить блок</button>
<div id="blocks"></div>
<script src="script.js"></script>
</body>
</html>CSS-стили для кнопки:
#addBlock {
width: 50px;
height: 50px;
margin-bottom: 20px;
border-radius: 5px;
}Стиль для блоков:
.block {
padding: 10px;
text-align: center;
margin-bottom: 10px;
width: 200px;
}Функции генерации случайных значений
Функция getRandomInt генерирует случайное целое число в заданном диапазоне (включая min и max):
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}Функция getRandomHexColor генерирует случайный цвет в формате HEX:
function getRandomHexColor() {
let hexColor = '';
for (let i = 0; i < 6; i++) {
hexColor += getRandomInt(0, 15).toString(16);
}
return hexColor;
}Обработка события клика
При нажатии кнопки «Добавить блок» создаётся новый блок div со случайным цветом фона и случайным числовым идентификатором:
$('#addBlock').click(function() {
let randName = getRandomInt(1, 700);
$('#blocks').prepend(`<div class="block rand${randName}">${randName}</div>`);
$(`.rand${randName}`).css('background-color', `#${getRandomHexColor()}`);
});