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

初衷

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

什么是range

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

效果图

range的值

一个小实验

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

 
1
2
3

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