Цвет внутри цвета javascript

Для того, чтобы сделать сменяемость цвета с помощью javascript, при наведении мышки. Нам понадобится:

Нам понадобится элемент DOM div,

+ onmouseover — когда мышка будет попадать на элемент,

И когда мышка будет покидать элемент — onmouseleave и внутри функций, в зависимости от действия будем изменять цвет, или возвращать первоначальный:

example.onmouseleave = function() example.style.background= «yellow»;
>;

Результат замены цвета при наведении мышки на элемент:

Изменить цвет(background) нажав по элементу.

В этом пункте разберем замену background цвета по клику с расположением js кода внутри тега.

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

Пусть это будет элемент DOM div,

Соберем это все в одн целое:

Результат замены цвета при клике на элемент:

Для того, чтобы увидеть изменение цвета элемента при нажатии на него нажмите по блоку!

Изменение цвета (background) javascript скриптом

Выше я уже рассмотрел один из вариантов изменения цвета (background) javascript внутри тега.

Теперь тоже самое(ну или похожее. ) сделаем внутри скрипта.

Стили для блока выделим в отдельный тег style

Далее скрипт изменения цвета (background) javascript скриптом

Используем один из способов onclick

Нам понадобится getElementById для получения объекта.

Ну и далее простое условие с проверкой, что внутри атрибута style , если цвет красный

Во всех други случаях, т.е. иначе(else) меняем на красный.

Скрипт javascript для замены background при нажатии

Не забываем. если не сделано onload, то скрипт должен находиться под выше приведенным кодом элемента, в котором собираемся изменить background при нажатии

if(if_id .style . background == «red»)

if_id .style . background = «#efefef»;

if_id .style . background = «red»;

Пример изменения background при нажатии javascript

Нам остается разместить приведенный код прямо здесь. Чтобы проверить как работает изменение background при нажатии javascript кликните по ниже идущему цветному блоку.

Изменение цвета кнопки (background) javascript

С помощью самописного скрипта, заставим кнопки менять цвет.

Алгоритм смены цвета кнопки.

У кнопки должно быть что-то одинаковое — «class» = click_me.

И что-то разное. уникальное, это id.

Получим имена класса и ид:

Условие -если нажали по нашей кнопке с классом:

Получаем объект из имени(которое получили раннее):

При покрашенной кнопке возвращаем нажатой кнопке её цвет по умолчанию:

Иначе, всем кнопкам с классом возвращаем в цикле её цвет по умолчанию и только той кнопке, по которой нажали изменяем цвет::

else
var links = document.querySelectorAll(«.click_me»);
links.forEach(link => link.setAttribute(«style», «background:#efefef»);
>)
if_id .style . background = «red»;
>

Соберем весь код смены цвета с помощью javascript

the_class = e . target.className;

if(if_id .style . background == «red»)

if_id .style . background = «#efefef»;

var links = document.querySelectorAll(«.click_me»);

if_id .style . background = «red»;

Источник

Смешивание двух цветов «естественно» в JavaScript

Проблема: Я хочу смешать два цвета в javascript и получить цвет результата. На SO есть много похожих вопросов, но я не нахожу ничего, что действительно работает правильно. Я знаю, что смешивание двух разных цветных красок (пигментов) и огней даст очень разные результаты (http://en.wikipedia.org/wiki/Color_mixing). Вот вопросы и предлагаемые решения, которые я уже видел, и попытались реализовать: 1: Смешивание двух цветовых векторов RGB для получения результата
Итак, смешивая цвета в RGB. Я реализовал его, и в некоторых случаях он работает, в некоторых случаях это не так. Рабочий пример: Смешивание red с yellow → orange . Отлично!
http://jsbin.com/afomim/1/edit Не работает пример: Смешивание blue с yellow → gray . Не так здорово!:) http://jsbin.com/afomim/5/edit
Я знаю, что при смешивании RGB blue с yellow никогда не будет green , и я понимаю, почему. Мы не найдем ответа здесь, отпустите вперед. 2: Добавление цветов (цветов) Вместе как Paint (синий + желтый = зеленый и т.д.) Попробуйте работать с значениями CMYK, как это предлагается в этом обсуждении. Смешение cyan с yellow дает green :
http://jsbin.com/igaveg/1/edit
, но перемещение blue с yellow приводит к black .
http://jsbin.com/igaveg/2/edit → Не работает! 3: Как смешивать цвета и «естественно» с С#?
Очень похожий вопрос. Самый верный ответ предлагает преобразовать цвета в LAB, и это решение кажется многообещающим.
Поэтому я преобразовал свои цвета в LAB. Алгоритм преобразования правильный, я его протестировал! http://jsbin.com/oxefox/1/edit Теперь у меня есть два цвета в LAB, но как их смешивать? ПРИМЕЧАНИЕ Я знаю, что, вероятно, я не найду алго, который смешивает blue с yellow и даст идеальный green , но я надеюсь, что смогу сгенерировать что-то похожее на зеленый: )

Синим цветом я не имею в виду точно # 0000ff и / или желтым цветом # ffff00, но в реальном мире, если вы смешаете немного синего с некоторым желтым, большую часть времени вы получите немного зеленого. Это приложение: fiftythree.com/paper (награждено Apple) имеет несколько замечательных функций смешивания цветов, и они говорят, что они работали над этим больше года 🙂 Если вы посмотрите на свою страницу, вы увидите, что они применяют ту же теорию о синем и желтый.

Помимо некромантии, почему бы не использовать HSL / HSV вместо RGB / CMYK для смешивания цветов? Я имею в виду, что если видимый спектр цветов является не чем иным, как масштабом (в нм), объединение двух оттенков означает только среднее, то же самое с насыщенностью и светом / значением. Я ошибся??

Источник

Javascript — генерировать разные оттенки одного цвета

Я хотел бы иметь возможность вызвать функцию, которая принимает базовый цвет и возвращает массив значений, соответствующих различным оттенкам одного цвета. Массив может содержать либо шестнадцатеричные значения, либо значения rgba(). Я хотел бы иметь возможность вводить количество желаемых оттенков. Тогда количество оттенков также может быть использовано в качестве показателя для увеличения тени. Например, если бы я хотел, чтобы выход имел 3 разных оттенка, 1-й оттенок был бы на 1/3 базы.. однако эта математика будет работать. Кроме того, в некоторых ситуациях 1-й оттенок может быть 100% прозрачным, поэтому я хотел бы принять аргумент для начальной альфы. Я организовал то, что, по моему мнению, будет основной логикой функции, но математика неясна для меня.

 var buildColorStops = function (baseColor,numberOfValues,initialAlpha) < var b = baseColor; var n = numberOfValues //expected number of colors in the output. If n was 3 results would be [light blue, blue(base), dark blue] (# or rgba will work) var d = 1 / n; // if number of values was 5 d would represent 1/5 of the base. var ia = initialAlpha; // some situations may require the first color to be 100% transparent var outputArray = []; var i = 0; while (i < n) < if (i == 0) < //. math on base color & incorporate initial alpha outputArray.push("result of math on base") >else < //. math on base color by incrementing d or 1/n outputArray.push("result of math on base") >> return outputArray; >// end of buildColorStops

Источник