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

9 декабря 2014 Антон Кулешов 2088 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
Читайте далее

Улучшенная подсветка кода от prism

11 февраля 2015 Антон Кулешов

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

9 марта 2016 Антон Кулешов

На сегодняшний день, мы обладаем уникальной возможностью – отслеживать многочисленные потоки информации и сохранять важный контент у себя на интернет страницах. В один клик регистрироваться и авторизоваться на сайтах и различных сервисах. Уже не проблема быть в курсе различных и разносторонних новостей из разных сфер жизни или оставаться на связи со своими близкими и знакомыми. Мы стали пользователями многочисленных социальных сетей и обладателями личных страниц с индивидуальными номерами, которые хранят срез наших интересов. Посещая магазины в интернете и сайты с товарами, мы с лёгкостью можем подарить лишнюю информацию о себе, не заполнив при этом ни одной формы. Для продавца каждый из нас потенциальный клиент, и он хочет знать, кто к нему зашёл на сайт и по какому запросу. И это возможно - мы сами можем вручить свой уникальный идентификатор (id) профиля в социальной сети даже не заметив этого, что даст продавцу больше шансов впарить свой товар. Достигается это путем использования разновидности кликджекинга, так называемого соцфишинга, об этом сегодняшняя статья.

Растянутый на всю ширину HTML список

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

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.