Показать Меню
falbar Cлучайный цвет на javascript

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

Cлучайный цвет на javascript

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

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

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

Теперь для начала работы нам необходимо сохранить экземпляр объекта just.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, можно получить массив сгенерированных цветов. В этом случаи все функции работают так - же, как и при генерации одного цвета. Однако необходимо учитывать, что возвращается именно массив.

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

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено