Форум

wave2013 · #1 (**permalink**) 08.10.2021, 22:15

Помогите, пожалуйста, с вопросом. Вообще не понимаю как сделать. Не силен в JS.

Есть:
1. <div data-var="Sat1" class="sat wind">например значение 93.5</div> и
2. <div data-var="Con1" class="o2 wind">например значение 158.</div>. в них раз в секунду приходят числовые значения. Так же приходят по три значения "R_test", "G_test", "B_test" от 0 до 255.
<div data-var="R_Test" class="R"></div>
<div data-var="G_Test" class="G"></div>
<div data-var="B_Test" class="B"></div>

Нужно:
Закрасить эти DIV`ы 1 и 2 используя приходящие значения RGB-цветов.
Или может проще перевод из RGB в HEX и им уже закрашивать. Даже не знаю.

Сайта нет. Все на локальном сервере. Учусь только.

Заранее огромное спасибо.

ksa · #2 (**permalink**) 08.10.2021, 22:54

Сообщение от wave2013

Или может проще перевод из RGB в HEX и им уже закрашивать.

Если у тебя уже есть цифры для РГБ - их и используй...

obj.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ');'

Сообщение от wave2013

Не силен в JS.

Значит придется осваивать или бросать эту затею.

wave2013 · #3 (**permalink**) 09.10.2021, 08:26

Сообщение от ksa

Значит придется осваивать или бросать эту затею.

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

Скажите, пожалуйста, как будет выглядеть полная конструкция скрипта.

Спасибо!

рони · #4 (**permalink**) 09.10.2021, 08:35

Сообщение от wave2013

как будет выглядеть полная конструкция скрипта.

Сообщение от wave2013

приходят числовые значения.

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

wave2013 · #5 (**permalink**) 09.10.2021, 09:49

Сообщение от рони

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

Записал экран

Нужно, чтобы цвет фона DIV (class="indiv") в котором ввожу цифру принимал RGB-цвет, записывая значения которые выводятся в классах "R", "G", "B", background: rgb(..., ..., ...); .

Спасибо!

рони · #6 (**permalink**) 09.10.2021, 15:24

wave2013,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        [data-var]:after {
            content: attr(data-var);
        }

        .color {
            height: 100px;
            width: 100px;
            background-color: var(--color, #fff)
        }
    </style>
</head>

<body>
    <input type="number" min="0" step="1" value="16777215">
    <div data-var="r : 255" class="r"></div>
    <div data-var="g : 255" class="g"></div>
    <div data-var="b : 255" class="b"></div>
    <div class="color"></div>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            let color = document.querySelector('.color');

            document.querySelector('input').addEventListener('input', function() {
                let c = +this.value,
                    b = c / 65536 | 0,
                    g = (c - b * 65536) / 256 | 0,
                    r = c - b * 65536 - g * 256;
                let components = {
                    r,
                    g,
                    b
                }
                for (let k in components) document.querySelector(`.${k}`).dataset.var = `${k} : ${components[k]}`

                color.style.setProperty("--color", `rgb(${r},${g},${b})`);
            });
        });
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript