Динамическая смена цвета DIV
Помогите, пожалуйста, с вопросом. Вообще не понимаю как сделать. Не силен в 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 и им уже закрашивать. Даже не знаю. Сайта нет. Все на локальном сервере. Учусь только. Заранее огромное спасибо. |
Цитата:
obj.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ');'
Цитата:
|
Цитата:
Скажите, пожалуйста, как будет выглядеть полная конструкция скрипта. Спасибо! |
Цитата:
Цитата:
|
Цитата:
Нужно, чтобы цвет фона DIV (class="indiv") в котором ввожу цифру принимал RGB-цвет, записывая значения которые выводятся в классах "R", "G", "B", background: rgb(..., ..., ...); . Спасибо! |
number to rgb
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>
|
| Часовой пояс GMT +3, время: 11:59. |