JS：三个滚动条可动态调整,实现分别更改RGB三个背景色并呈现此时的背景色,并输出rgb的值

可以使用以下代码实现：

HTML部分：

<div id="colorBox"></div>
<div id="scrollbars">
  <input type="range" id="red" min="0" max="255" value="0">
  <input type="range" id="green" min="0" max="255" value="0">
  <input type="range" id="blue" min="0" max="255" value="0">
</div>

CSS部分：

#colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin-bottom: 20px;
}

#scrollbars {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 200px;
}

JS部分：

const colorBox = document.getElementById('colorBox');
const redScroll = document.getElementById('red');
const greenScroll = document.getElementById('green');
const blueScroll = document.getElementById('blue');

function changeColor() {
  const redValue = redScroll.value;
  const greenValue = greenScroll.value;
  const blueValue = blueScroll.value;
  const color = `rgb(${redValue}, ${greenValue}, ${blueValue})`;
  colorBox.style.backgroundColor = color;
  console.log(color);
}

redScroll.addEventListener('input', changeColor);
greenScroll.addEventListener('input', changeColor);
blueScroll.addEventListener('input', changeColor);

这个代码通过监听三个 `input` 元素的 `input` 事件，获取当前三个滑动条的值，并拼接成 `rgb` 颜色字符串，然后将其赋值给 `colorBox` 元素的 `backgroundColor` 属性，并输出 `rgb` 值。