废话不多说,上图 点击右侧进入 演示网页
大概思路是这样的,首先建立一个input框,然后type改成range,min="0"
,max="255" 即0到255表示黑到白的一个过程,并标注id="slider"。
然后把要修改的背景颜色的div或者body的id标注为changecolor。
最后用JS中的onchange事件函数将两个id连接起来,并注入事件。
不要忘了给进度条修改样式,因为不同的浏览器会有不同的样式,有的很好看,有的很复古。
代码如下
HTML
<div class="content" onmouseover="logos()" id="changecolor">
<div class="content_title ">
<h2><span>  PREVIEW  </span></h2>
</div>
<div class="slider">
<span>  CHANGECOLOR  </span>
<input type="range" id="slider" min="0" max="255" value="">
</div>
</div>
//给父级div改变颜色
css
#slider {
-webkit-appearance: none;
position: relative;
outline: none;
background: none;
}
#slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: rgb(253, 61, 39);
border-radius: 50%;
}
JS
var slider = document.getElementById("slider")
slider.onchange = function() {
var val = this.value;
var changecolor = document.getElementById("changecolor");
changecolor.style.backgroundColor = "rgb(" + val + "," + val + "," + val + ")";
}
TIPS:当rgb所对应的每个数值都相同时,则是灰色。