Как пользоваться random color?

Question

[del993788]

Здравствуйте. Есть вот такой скрипт https://github.com/davidmerfield/randomColor . Я не могу понять, как его использовать. Какой я должен использовать стиль у блоков, чтобы они приняли рандомные цвета? Как мне вообще с html взаимодействовать? https://jsfiddle.net/bLbhcno3/

Answer 1

[del993788]

[].forEach.call( document.querySelectorAll('.swatch'), function(el) {
        el.style.backgroundColor = randomColor({luminosity: 'light'});
 });

Answer 2

[Kovalsky]

Пример с гитхаба

// Returns a hex code for an attractive color
// Возвращает шестнадцатеричный код для привлекательного цвета (c) Google Translate
randomColor(); 
// "#c7f9fc"

// Returns an array of ten green colors
// Возвращает массив из десяти зеленых цветов (c) Google Translate
randomColor({
   count: 10,
   hue: 'green'
});
// ["#44d644", "#9def8d", "#c0ef7a", "#b2ffb3", "#8cffdc", "#1be809", "#5ff49d", "#cefc7e", "#7fdb6d", "#7df455"]

// Returns a hex code for a light blue
// Возвращает шестнадцатеричный код для светло-голубой (c) Google Translate
randomColor({
   luminosity: 'light',
   hue: 'blue'
});
// "#b5c6ff"

// Returns a hex code for a 'truly random' color
// Возвращает шестнадцатеричный код для 'истинно случайный "цвет (c) Google Translate
randomColor({
   luminosity: 'random',
   hue: 'random'
});
// "#020504"

// Returns a bright color in RGB
// Возвращает яркий цвет в RGB (c) Google Translate
randomColor({
   luminosity: 'bright',
   format: 'rgb' // e.g. 'rgb(225,200,20)'
});
// "rgb(4, 126, 214)"

// Returns a dark RGB color with random alpha
// Возвращает темный цвет RGB со случайным альфа (c) Google Translate
randomColor({
   luminosity: 'dark',
   format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});
// "rgba(9, 163, 83, 0.10101238849233907)"

// Returns a dark RGB color with specified alpha
// Возвращает темный цвет RGB с указанным альфа (c) Google Translate
randomColor({
   luminosity: 'dark',
   format: 'rgba',
   alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});
// "rgba(12, 70, 127, 0.05832547896138873)"

// Returns a light HSL color with random alpha
// Возвращает цвет света HSL со случайным альфа (c) Google Translate
randomColor({
   luminosity: 'light',
   format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});
// "hsla(43, 100%, 89.5%, 0.7559263499824191)"

Также можно глянуть демку и на её код

UPD: сделал пример, в котором используется randomColor.js

Comments

[del993788]

как randomColor поймёт, что нужно дать div'у рандомный цвет? я смотрел демку...

[Kovalsky]

qqignatqq: посмотрите примеры. RandomColor возвращает либо строки с цветом, либо массив со строками.

[del993788]

Никита Полевой: вы наверное не поняли, зачем я написал вопрос. то, что вы постите, я уже видел. в коде демки написана полная чушь по генерации логотипа и гугла аналитики. Да, там есть что-то связанное с подключением класса, но эти строки кода "отравлены" бесполезным балластом... поэтому я и обратился на тостер....

[Kovalsky]

qqignatqq: дело в том, что демка как раз затем и демка, что в ней показано как использовать скрипт, как его применять. В ней можете посмотреть на алгоритм, в котором используется randomColor. Алгоритм очень простой, происходит как раз то, что вам нужно. Чуши там нет, на аналитику можете не смотреть. RandomColor используется в функциях renderLogo и renderDemo. Вот можете даже выполнить этот код на странице демки:

setInterval(function() { renderDemo(Math.random()) }, 500);

[del993788]

Никита Полевой: ну вот, пожалуйста, https://jsfiddle.net/bLbhcno3/1/ . Почему нет цвета?

[Kovalsky]

qqignatqq: цвет есть, в моём случае randomColor({ luminosity: 'random', hue: 'pink' }); вернуло "#5b2270".

Технически у блоков не изменился цвет потому что вы его не задали. А в целом этого не происходит потому что вы меня не слушаете. Я же говорю вам: откройте код демки, посмотрите как устанавливается цвет для элемента. Я даже сказал вам в какой функции это происходит, в функции renderDemo. Вам вообще из всех трудов осталось только открыть код, найти эту функцию, найти где в ней выполняется та функция которая вам интересна (randomColor) и посмотреть что происходит с результатом выполнения.

[del993788]

Никита Полевой: я вас не понимаю, потому что, к примеру, есть https://chmln.github.io/flatpickr/ . Чтобы его использовать, нужно создать input с классом flatpickr и прописать в js flatpickr(".flatpickr"); . Здесь всё логично. Я пытаюсь найти такое же в random color, но я не понимаю, что нужно делать. Я вас слышу, но не понимаю.

Технически у блоков не изменился цвет потому что вы его не задали.

как задать?

Почему в тесте так много строчек кода? Где сама суть? Где randomcolor(".box"); ?

[del993788]

Никита Полевой: будьте любезны, приведите пожалуйста пример вот в этом фидле https://jsfiddle.net/bLbhcno3/2/ . randomcolor я уже подключил

[Kovalsky]

qqignatqq: добавил в ответ пример

[del993788]

Никита Полевой: ахахахах))) это стёб такой? сложно было написать просто:

[].forEach.call( document.querySelectorAll('.swatch'), function(el) {
        el.style.backgroundColor = randomColor({luminosity: 'light'});
 });

нет. надо было запотеть и сделать еще непонятнее)))

[Kovalsky]

qqignatqq: ну, во-первых, тостер - это не чатик охотников за привидениями, готовых придти на помощь в любую секунду, это всё же q&a, как stack overflow.

Во-вторых, да, это было сложно. Сложно помогать человеку, который сам не хочет себе помочь, просто последовав моему совету почитать код.

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

[del993788]

Никита Полевой: нет. всё проще. на другом, как вы выразились, q&a мне помогли. Проблема в том, что скрипт этот написал му*ак с му*акской документацией, которой нет. Почему у jquery, у ajax, у всяческих datepicker'ов и слайдеров есть нормальная инструкция, где говорят, что нужно делать, а здесь нет? Вот как я , человек только с около базовыми знаниями js, должен был допереть до вот этого кода?

[].forEach.call( document.querySelectorAll('.swatch'), function(el) {
        el.style.backgroundColor = randomColor({luminosity: 'light'});
 });

[Kovalsky]

qqignatqq: а что именно здесь сложно? Каждая буква приведённого вами кода разжёвана даже на том же тостере не однажды: объект, возвращаемый querySelectorAll, не является экземпляром Array, поэтому forEach мы вызываем отдельно; стили элемента привязаны к объекту {dom_element}.style; функция randomColor возвращает либо строку, либо массив со строками.

"Вот как я , человек только с около базовыми знаниями js, должен был допереть до вот этого кода?" - поверьте, это никого не интересует. Несмотря на ничтожный объём, за проектом randomColor следят 80 разработчиков, у него 240 форков, 8(!) официальных портов, 18 разработчиков принимают участие в его разработке, 3755 разработчиков посчитали скрипт полезным. Вы правда считаете, что хоть один из этих людей расстроился бы, если узнал, что вы не смогли научиться использовать randomColor только лишь в виду умственной лени, абсолютного отсутствия мотивации и желания учиться?

Если у вас возникают сложности с пониманием простейших инструментов, логичнее восполнить пробелы в теории, чем обзывать дураками людей, пожертвовавших своё время на создание этих инструментов.

[del993788]

Никита Полевой: по поводу 3755. Если бы возможно было бы ставить на github дизлайки, то он, randomcolor, набрал бы их с невероятной легкостью...

[Kovalsky]

qqignatqq, если бы на гитхабе можно было бы ставить дислайки, у randomColor он был бы всего один - ваш. Не судите по себе, понимание разницы между строкой и элементом не есть какое-то сакральное знание, его имеют все здесь. Проблемы с использованием этого скрипта больше ни у кого не возникали. Не randomColor причина вашей некомпетентности.