初衷
制作一个针对视觉的产品,快速调出想要的颜色,然后写在给前端程序员的文档里,方便前端程序员进行页面的配色处理[滑稽]
什么是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。 如图