Генерация случайного цвета на JavaScript

9 декабря 2014 Антон Кулешов 2100 0

Хотите яркий и динамичный фон для своего сайта? И чтобы на каждой странице разный? RandomColor – решение специально для вас! При помощи данной библиотеки легко сгенерировать JavaScript фон, состоящий из квадратов различного цвета.

Реклама

И так, какие же возможности даёт нам этот скрипт? Как при его помощи получить динамически меняющийся JavaScript фон? Чтобы разобраться подключаем её к себе на страницу:

<script src="just.RandomColor.js" type="text/javascript"></script>

Теперь для начала работы нам необходимо сохранить экземпляр объекта randomColor в переменную:

var color = new just.RandomColor();

При помощи этой библиотеки мы можем получить случайно сгенерированный цвет в одном из четырёх форматах: HEX, RGB, RGBA, CSS. Для того чтобы добраться до самого цвета нужно воспользоваться свойствам value для каждой из функций кроме CSS.

color.toHex().value;  // "39d3e5"
color.toRGB().value;  // {r: 12, g: 156, b: 211}
color.toRGBA().value; // {r: 46, g: 195, b: 223, a: 0.2}
color.toCSS(); 	      // rgba(46, 173, 213, 1)

Но это - не самый удобный формат записи. В большинстве случаев мы используем цвета в работе с CSS файлом. Если вместо value указать метод toCSS(), то получим рабочие форматы записей.

color.toHex().toCSS(); 	// "#31c3d3"
color.toRBG().toCSS();  // "rgb(16, 145, 217)"
color.toRGBA().toCSS(); // "rgba(54, 125, 127, 0.3)"

Ещё один метод, который есть в библиотеке, это - refresh(). Он тоже генерирует случайный цвет, но только непосредственно через функцию. В этом случае мы можем добавить метод к событию клика или скроллинга, например.

color.refresh().value; // {r: 20, g: 174, b: 168, a: 0.2}

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

var color  = new just.RandomColor({
	r: [30, 50],
	g: [72,168],
	a: [0.1, 0.7]
});

Последнее, что я хочу добавить про эту библиотеку, это то, что передав вторым параметрам length, можно получить массив сгенерированных цветов. В этом случаи все функции работают так - же, как и при генерации одного цвета. Однако необходимо учитывать, что возвращается именно массив.

Пример работы randomColor вы сможете увидеть в материалах «демо».

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

О том, как я не очень «легко» коротал вечер в компании приложений Facebook

14 января 2016 Антон Кулешов

Миром овладели соцсети, а потому, мало кто станет регистрироваться на сайте или форуме, заполняя при этом кучу полей, добавляя аватарку и прочее. Дабы привлечь посетителей нам придется использовать API социальных сетей – где уже есть вся нужная нам информация для оформления профиля. Ранее мы уже рассматривали один из способов авторизации пользователя через «ВКонтакте», сегодня поговорим о Facebook.

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

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

Запрет обтекания тремя способами на CSS

24 июля 2014 Антон Кулешов

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