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