持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

初衷

制作一个针对视觉的产品，快速调出想要的颜色，然后写在给前端程序员的文档里，方便前端程序员进行页面的配色处理[滑稽]

什么是range

在html中有一个<input>的标签，通过在input中的type属性来控制输入框的类型。其中有一个type="range"的range类型，可以实现滑动取值的效果。

效果图

range的值

一个小实验

实现了一个range的滚动条之后，我们先做个小实验，通过js获取一下他的value，看看是什么呢？

<!DOCTYPE html>
<html>
    <head>
        <title>range演示</title>
        <meta charset="utf-8">
    </head>
    <body>
        <input type="range" id="range">
    </body>
    <script>
        let range = document.getElementById('range');
        let flag = false;
        range.addEventListener('mousedown',()=>{
            range.addEventListener('mouseup',()=>{
                console.log(document.getElementById('range').value);
            })
        })
    </script>
</html>

上面代码我首先设置了在html代码中写了一个range的滑动条，并为他赋予了一个id---range。然后在JavaScript中首先通过document.getElementById获取这个id，然后为他绑定了一个鼠标按下的事件，当鼠标按下后，抬起的的时候会触发绑定的第二个事件，同时在控制台中打印出value。如图

2222.jpg.png 那么读者可能会说，为什么不能只绑定一个mousedown的事件，然后鼠标按下再获取range的值呢？答案是： mousedown是鼠标按下的时候就会触发，想象一下，假如此时range的小圆球在中部的位置，如果用户把他拖拽到80的位置，那么拖动之后，当用户鼠标按下的第一时间，50的值就会获取到，而用户真正期待的值，80是在下一次拖动的时候才能获取到，但是如果用户下一次要拖动，那么极大几率他并不想获取80的值了，也就是说，我们期望是用户鼠标摁下时开始检测，但只有鼠标抬起时，range条的位置才是我们最终要关注的值，所以我这边是采取了外层绑定一个mousedown事件触发的条件，在内部又绑定了一个mouseup的事件触发条件。

控制range的value的范围

value的范围，默认的是0-100，但是因为我们要制作的rgba()函数的参数是0-255，所以我们可以通过在<input type="range" id="range">中设置min和max的值来控制其value的范围方案如下：

<input type="range" id="range" min="0" max="255">

分别为rgba的四个参数进行绑定

let range1 = document.getElementById('range1');
        let range2 = document.getElementById('range2');
        let range3 = document.getElementById('range3');
        let range4 = document.getElementById('range4');
        range1.addEventListener('mousedown',()=>{
            range1.addEventListener('mouseup',()=>{
                console.log(range1.value);
            })
        })
        range2.addEventListener('mousemove',()=>{
            range2.addEventListener('mouseup',()=>{
                console.log(range2.value);
            })
        })
        range3.addEventListener('mousedown',()=>{
            range3.addEventListener('mouseup',()=>{
                console.log(range3.value);
            })
        })
        range4.addEventListener('mousedown',()=>{
            range4.addEventListener('mouseup',()=>{
                console.log(range4.value);
            })
        })

分别为四个range条进行绑定，通过移动range来改变值

改变div区域颜色的JavaScript函数

function change(){
            let divColor = document.getElementById('div');
            divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
        }

首先获取div区域的id，然后通过divColor.style.backgroundColor改变背景色，实现滑动改变颜色的效果。

初版本全部代码

<!DOCTYPE html>
<html>
    <head>
        <title>range演示</title>
        <meta charset="utf-8">
        <style>
            .div{
                position: absolute;
                width: 800px;
                height: 600px;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            [type="range"]{
                margin-right: 200px;
            }
        </style>
    </head>
    <body>
        red:<input type="range" id="range1" min="0" max="255">
        green:<input type="range" id="range2" min="0" max="255">
        blue:<input type="range" id="range3" min="0" max="255">
        alpha:<input type="range" id="range4" min="0" max="100">
        <div class="div" id="div"></div>
    </body>
    <script>
        function change(){
            let divColor = document.getElementById('div');
            divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
        }
        let range1 = document.getElementById('range1');
        let range2 = document.getElementById('range2');
        let range3 = document.getElementById('range3');
        let range4 = document.getElementById('range4');
        range1.addEventListener('mousedown',()=>{
            range1.addEventListener('mouseup',()=>{
                console.log(range1.value);
                change();
            })
        })
        range2.addEventListener('mousemove',()=>{
            range2.addEventListener('mouseup',()=>{
                console.log(range2.value);
                change();
            })
        })
        range3.addEventListener('mousedown',()=>{
            range3.addEventListener('mouseup',()=>{
                console.log(range3.value);
                change();
            })
        })
        range4.addEventListener('mousedown',()=>{
            range4.addEventListener('mouseup',()=>{
                console.log(range4.value);
                change();
            })
        })
    </script>
</html>

不足和优化----最终解决的版本

我们上面虽然完成了通过滚动条改变颜色的效果，但是我们发现，上述我们完成的demo有一些缺陷，即：只有滑动之后，鼠标松开，才能看到渲染的效果，中途的改变无法发现，不能很好的很直观的进行观察。为了解决这个问题，我采取了通过mousemove来替换mousedown嵌套mouseup的方法。addEventListener()内调用change()函数。完成动态渲染改变页面颜色。最终解决版本如下:

<!DOCTYPE html>
<html>
    <head>
        <title>range演示</title>
        <meta charset="utf-8">
        <style>
            .div{
                position: absolute;
                width: 800px;
                height: 600px;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            [type="range"]{
                margin-right: 200px;
            }
        </style>
    </head>
    <body>
        red:<input type="range" id="range1" min="0" max="255">
        green:<input type="range" id="range2" min="0" max="255">
        blue:<input type="range" id="range3" min="0" max="255">
        alpha:<input type="range" id="range4" min="0" max="100">
        <div class="div" id="div"></div>
    </body>
    <script>
        function change(){
            let divColor = document.getElementById('div');
            divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
        }
        let range1 = document.getElementById('range1');
        let range2 = document.getElementById('range2');
        let range3 = document.getElementById('range3');
        let range4 = document.getElementById('range4');
        range1.addEventListener('mousemove',()=>{
            change();
        })
        range2.addEventListener('mousemove',()=>{
            change();
        })
        range3.addEventListener('mousemove',()=>{
            change();
        })
        range4.addEventListener('mousemove',()=>{
            change();
        })
    </script>
</html>

最后完成。

前端通过range制作的rgba配色小工具

初衷