JS:设置三个滚动条,可分别调整RGB的三个值,输出此时呈现的背景色,三个滚动条各自调整的rgb的值
时间: 2023-08-13 16:08:21 浏览: 40
可以使用以下代码实现:
HTML:
```html
<div>
<label for="red">Red:</label>
<input type="range" min="0" max="255" id="red">
</div>
<div>
<label for="green">Green:</label>
<input type="range" min="0" max="255" id="green">
</div>
<div>
<label for="blue">Blue:</label>
<input type="range" min="0" max="255" id="blue">
</div>
<div>
<h2>Current color:</h2>
<div id="color"></div>
</div>
```
JavaScript:
```javascript
const red = document.getElementById('red');
const green = document.getElementById('green');
const blue = document.getElementById('blue');
const color = document.getElementById('color');
function updateColor() {
const r = red.value;
const g = green.value;
const b = blue.value;
color.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
color.innerHTML = `RGB: ${r}, ${g}, ${b}`;
}
red.addEventListener('input', updateColor);
green.addEventListener('input', updateColor);
blue.addEventListener('input', updateColor);
```
这段代码会创建三个滑动条,用于调整红、绿、蓝三个颜色通道的值。每次滑动条的值发生变化时,`updateColor` 函数会被调用,更新显示当前的背景色以及每个通道的值。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)