html5调色器

这里运用到了html5中input新增的type属性range。

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

input中如果不添加其他属性，value初始值是50，min是0，max是100.所以如果我们要使用滑动条来改变dvi的颜色的话，首先就要改变max的值为255，因为color的rgb属性值的取值范围是0~255.通过获取到的value来改变rgb的值从而实现改变颜色的功能，代码如下：

<script>
    var div = document.getElementsByTagName("div")[0]
    var inp1 = document.getElementsByTagName("input")[0]
    var inp2 = document.getElementsByTagName("input")[1]
    var inp3 = document.getElementsByTagName("input")[2]
    var num1 = 0
    var num2 = 0
    var num3 = 0
    inp1.onchange = function(){
        num1 = Number(this.value)
        myColor()
    }
    inp2.onchange = function(){
        num2 = Number(this.value)
        myColor()
    }
    inp3.onchange = function(){
        num3 = Number(this.value)
        myColor()
    }
    function myColor(){
        div.style.backgroundColor = "rgb(" + num1 + "," + num2 + "," + num3 + ")"
        console.log(num1,num2,num3);
    }
</script>