| 大家好，今天我在看web前端的HTML时，看到input标签的type属性是range时在页面上显示的是一个滑块，我突发奇想能不能通过滑来改变网页的颜色。现在我和大家分享一下通过滑块来改变网页的颜色。 首先要知道怎么样来表示颜色，颜色的表示有四种方式： 1、用颜色的名称来表示颜色：red,green...等 2、用#加16进制数表示：#FF0000/#F00 红色、#00FF00/#0F0 绿色 ...等 3、用rgb值：rgb(0,0,0) 黑色、rgb(255,255,255) 白色....等 4、用rgba值表示：rgba(0,0,0,0.5) 半透明黑色、rgba(255,0,0,.5) 半透明红色（a值表示透明度） 我用的是rgb值表示颜色的，r值，g值，b值的取值范围都是0~255。 body中滑块的设置：max是最大取值，min是最小取值，step是步进值，这里还有一个value属性默认是取中间值 <body id="box"><label for="r">r值</label><input type="range" max="255" min="0" step="1" id="r"><label for="g">g值</label><input type="range" max="255" min="0" step="1" id="g"><label for="b">b值</label><input type="range" max="255" min="0" step="1" id="b"></body> JavaScript：为每个滑块设置change事件，当滑块的值改变时就执行。 <script> //通过id获取元素的函数 function $(id) { return document.getElementById(id); } //获取每个滑块的值 let r = $('r').value let g = $('g').value let b = $('b').value //通过id获取元素 let box = $('box') //设置网页背景颜色 box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')'; //为r值的滑块设置事件 $('r').addEventListener("change", function () { r = this.value; box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')'; }) //为g值的滑块设置事件 $('g').addEventListener("change", function () { g = this.value; box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')'; }) //为b值的滑块设置事件 $('b').addEventListener("change", function () { b = this.value box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')'; })</script>
当然input中也有改变颜色的方法 <input type="color" onchange="document.body.style.backgroundColor=this.value"> 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Vue之vue.$set()方法源码案例详解
浅谈Axios去除重复请求方案 |
