用html+css+js写一个颜色滑动控制器
时间: 2023-12-29 19:47:09 浏览: 34
以下是一个简单的颜色滑动控制器的示例代码,使用HTML、CSS和JavaScript实现:
HTML代码:
```
<div class="slider-container">
<input type="range" min="0" max="360" value="0" class="slider" id="hue-slider">
<div class="color-preview" id="color-preview"></div>
</div>
```
CSS代码:
```
.slider-container {
width: 300px;
margin: 20px auto;
}
.slider {
width: 100%;
height: 20px;
-webkit-appearance: none;
background: linear-gradient(to right, red, yellow, green, cyan, blue, violet, red);
outline: none;
border-radius: 10px;
margin-bottom: 10px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.color-preview {
width: 100%;
height: 50px;
background-color: red;
margin-top: 10px;
border-radius: 10px;
}
```
JavaScript代码:
```
const slider = document.getElementById("hue-slider");
const preview = document.getElementById("color-preview");
slider.addEventListener("input", function() {
const hueValue = slider.value;
preview.style.backgroundColor = `hsl(${hueValue}, 100%, 50%)`;
});
```
这个颜色滑动控制器使用`<input type="range">`元素作为滑动条,并使用CSS的`linear-gradient()`函数来创建了一个彩虹渐变背景。JavaScript代码监听了滑动条的`input`事件,并根据滑动条的值动态修改了一个颜色预览框的背景色,使用了`hsl()`函数来设置颜色,其中Hue(色相)的值由滑动条的值决定,Saturation(饱和度)为100%,Lightness(亮度)为50%。