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


Случайный цвет фона. Здравствуйте дорогие друзья! В этом уроке мы создадим генератор случайного 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 пример

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

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


Раздел: Программирование

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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

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

* Ваше имя:

Ваш e-mail:

*