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

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