Генератор цветов на javascript + jquery

Случайный цвет фона.
Здравствуйте дорогие друзья! В этом уроке мы создадим генератор случайного html цвета, с возможностью выбора кода цвета.

В самом конце урока, можно посмотреть демо пример, а также скачать исходные файлы этого примера.

Для начала, мы создадим div блок, у которого, каждые 800 миллисекунд, случайным образом, будет меняться фон.

Но это еще все, кроме изменения цвета, сделаем возможность остановить (зафиксировать) изменение цвета и на всплывающем окне получим код html цвета, который являлся фоном dav’а в момент остановки. (посмотрев демо пример, станем намного понятнее о чем идет речь).

Вообще, это будет маленький инструмент для подбора нужного цвета на глаз, т.е. вы смотрите на цвета – жмете на понравившийся и получаете код этого цвета.

Html цвета будет состоять только из цифр (можно доработать и получать все случайные значения, содержащие и буквы тоже), которые мы будем генерировать.

О случайных числах читайте эту статью: Как получить случайное число на JavaScript?

Давайте взглянем на код разметки (полный код представлен в исходных файлах, которые можно скачать ниже).

<div id="wrapper"></div>

<div id="block">

	<p>Текущий цвет: <input onclick="this.select();" size="6" id="cur_color"></p>
	<center id="go_search"><span class="myButton">Продолжить поиск цвета</span></center>

</div>
  • Div с id wrapper – у этого блока будет изменяться фон.
  • Div с id block – это всплывающее окно, в котором выводится код цвета и кнопка.

Давайте рассмотрим код на query:

$(document).ready(function(){
	
	var wrapper = $('#wrapper');
	window.block = $('#block');

		// Получаем случайное число и изменяем фон блока
	function get_color() { 

		var random_color = '#' + Math.round((Math.random() * (999999 - 100000) + 100000));
		wrapper.css({'background-color' : random_color});
		
		wrapper.click(function(){
			clearInterval(intervalID); // останавливаем интервал
			block.show(); // показываем всплывающее окно
			$('#cur_color').val(random_color);
		});
	}

		// Устанавливаем интервал
	window.intervalID = setInterval(get_color, 800);
	
		// Закрываем всплывающее окно и запускаем интервал
	$('#go_search').click(function(){
			block.hide();		
			intervalID = setInterval(get_color, 800);
	});

});
  • wrapper – переменная нашего блока.
  • block – глобальная переменная для всплывающего окна.
  • get_color() – функция, которая получает случайное число и меняем цвет фона, она срабатываем каждые 800 миллисекунд и останавливается (при удалении интервала), когда мы нажимаем на блок.

На этом все, можете скачать исходные файлы примера – возможно кому-то эти примеры пригодятся в качестве какого-нибудь дополнительного элемента сайта, либо в качестве дизайна.

Demo пример

Скачать исходники

Удачи и до новых встреч!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>