初衷

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

什么是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。如图

控制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>

最后完成。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

前端通过range控制的rgba配色小工具相关推荐

整理了 25 个前端相关的学习网站和一些靠谱的小工具，都来看看吧
给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏.教程.社区网站和博客,以及一些资源网站,希望可以帮助到大家! CSS 相关 1.CSS Battle - 在线比拼 CSS ...
前端工程师都有用哪些比较靠谱的小工具？(转)
Wappalyzer 是一个用于识别网站使用的库和框架的工具.它也是一个 Chrome 插件,是目前为前端开发人员最有用的工具之一.下一次你想知道一个网站使用什么库,来创建一个特定的可视化功能,Wap ...
python前端开发需要的工具_前端工程师都有用哪些比较靠谱的小工具？
Wappalyzer 是一个用于识别网站使用的库和框架的工具.它也是一个 Chrome 插件,是目前为前端开发人员最有用的工具之一.下一次你想知道一个网站使用什么库,来创建一个特定的可视化功能,Wap ...
值得收藏的25 个前端相关的学习网站 + 靠谱的小工具
点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! 来自:南瓜编程公众号给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些 ...
25 个前端相关的学习网站和一些靠谱的小工具
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏.教程.社区网站和博客,以及一些资源网 ...
前端开发小工具SuperApp——Ctrl+S自动刷新浏览器
推荐前端开发中一个小工具SuperApp,灰常好用,前端开发的童鞋们,走过路过不要错过啊! 使用SuperApp后,在编辑器中更新页面资源(html,js,css)时,只需按Ctrl+S,浏览器会自动 ...
Vue-Access-Control：前端用户权限控制解决方案
Vue-Access-Control:前端用户权限控制解决方案参考文章: (1)Vue-Access-Control:前端用户权限控制解决方案 (2)https://www.cnblogs.com/ ...
web前端开发小工具集合
收集的一些轻量级非常实用的前端开发小工具,以后还会不定期进行更新,现将目前收集的信息列表如下: CSS 3相关 1.CSS3样式生成器:http://www.css88.com/tool/css3 ...
仿站小工具的使用---扒取别人前端代码
1.下载仿站小工具: 点击跳转仿站小工具下载链接 2.查看配置,如果不需要改变路径也可不设置, 输入网址输入保存目录,开扒首页扒取结果: 打开index.html,可正常访问逐个界面扒取,, ...

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

初衷