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

Заказать у меня создание сайта от 3000 рублей!
Случайный цвет фона. Здравствуйте дорогие друзья! В этом уроке мы создадим генератор случайного html цвета, с возможностью выбора кода цвета. В самом конце урока, можно посмотреть демо пример, а также скачать исходные файлы этого примера. Для начала, мы создадим div блок, у которого, каждые 800 миллисекунд, случайным образом, будет меняться фон. Но это еще все, кроме изменения цвета, сделаем возможность остановить (зафиксировать) изменение цвета и на всплывающем окне получим код html цвета, который являлся фоном dav'а в момент остановки. (посмотрев демо пример, станем намного понятнее о чем идет речь). Вообще, это будет маленький инструмент для подбора нужного цвета на глаз, т.е. вы смотрите на цвета - жмете на понравившийся и получаете код этого цвета. Html цвета будет состоять только из цифр (можно доработать и получать все случайные значения, содержащие и буквы тоже), которые мы будем генерировать. О случайных числах читайте эту статью: Как получить случайное число на JavaScript? Давайте взглянем на код разметки (полный код представлен в исходных файлах, которые можно скачать ниже).
<div id="wrapper1"></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 пример

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

Удачи и до новых встреч!
Заказать у меня создание сайта от 3000 рублей!

Раздел: JavaScript с примерами

Дата последнего изменения: 2014-07-14 20:41:05

Просмотров: 11196

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*