DANFA

Блок со сменным фоном при клике на JavaScript

Dolphin
22.04.2018 04:32:16 pm
По просьбе хорошего знакомого написал сценарий, который меняет цвет фона у блока по клику на сам блок. Цвет фона должен быть рандомный, ни каких за ранее подготовленных шаблонов цвета быть не должно, код цвета генерируется при клике. В блоке должен отображаться код текущего цвета. Вот, что получилось: блок выглядит так (как обычный блок): 
<div class="block" id="block">
	<span>336699</span>
</div>

Пишем класс стиля к этому блоку и span'у: 
.block {
	background: #336699;
	height: 100px;
	width: 100px;
}

.block span {
	color: #FFFFFF;
}

И сам сценарий (весь код прокомментировал): 
var block = document.getElementById('block'); // Получаем блок с id="block"

// При клике по блоку выполняем функцию
block.onclick = function() {
	var symbols = '0123456789ABCDEF'; // Символы, которые можно использовать для генерации кода цвета
	var blockColor = '';              // Переменная, которая скоро будет содержать код цвета

	// При помощи цикла "for" добавляем в переменную "blockColor" по одному случайному символу
	for (var i = 0; i < 6; i++) {
		blockColor += symbols.charAt(Math.floor(Math.random() * symbols.length));
	};

	this.style.background = '#' + blockColor;                    // Заменяем текущий фон блока на только что сгенерированный
	this.getElementsByTagName('span')[0].innerHTML = blockColor; // Заменяем содержимое тега "span" на новый код цвета
};

Вот такой еще вариант, не сильно отличается от предыдущего: 
var block = document.getElementById('block'); // Получаем блок с id="block"

// При клике по блоку выполняем функцию
block.onclick = function() {
	var symbols = '0123456789ABCDEF';    // Символы, которые можно использовать для генерации кода цвета
	var symbolsCnt = symbols.length - 1; // Получаем количество символов
	var blockColor = '', symbol;         // Переменные

	// При помощи цикла "for" добавляем в переменную "blockColor" по одному случайному символу
	for (var i = 0; i < 6; i++) {
		symbol = Math.floor(Math.random() * symbolsCnt);
		blockColor += symbols.substring(symbol, symbol + 1);
	};

	this.style.background = '#' + blockColor;                    // Заменяем текущий фон блока на только что сгенерированный
	this.getElementsByTagName('span')[0].innerHTML = blockColor; // Заменяем содержимое тега "span" на новый код цвета
};

Вот и все.