js调色板

来源：互联网发布：百度云网络不给力编辑：程序博客网时间：2024/06/06 01:31

方法一：

<script type="text/javascript">         window.onload = function(){            var r = document.getElementById("r");            var g = document.getElementById("g");            var b = document.getElementById("b");            var rval = 0;//存储颜色的变量            var gval = 0;//存储颜色的变量            var bval = 0;//存储颜色的变量            r.onchange = function(){                rval = this.value;                document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";            }            g.onchange = function(){                gval = this.value;                document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";            }            b.onchange = function(){                bval = this.value;                document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";            }         }    </script></head><body>    红色：<input type="range" value="0" min="0" max="255" id="r" /><br />    绿色：<input type="range" value="0" min="0" max="255" id="g" /><br />    蓝色：<input type="range" value="0" min="0" max="255" id="b" /><br /></body>

方法二：

<script type="text/javascript">         window.onload = function(){            var rval = gval =bval = 0;//存储颜色的变量            function $(id){               return document.getElementById(id);            }            function fn(obj){                $(obj).onchange = function(){                    /*if(obj === "r"){                        rval = this.value;                        console.log(rval)                    }else if(obj === "g"){                        gval = this.value;                    }else{                        bval = this.value;                    }*/                    switch(obj){                        case "r":                        rval = this.value;                        break;                        case "g":                        gval = this.value;                        break;                        case "b":                        bval = this.value;                        break;                    }                    document.body.style.backgroundColor = "rgb("+rval+","+gval+","+bval+")";                }            }            fn("r");            fn("g");            fn("b");         }    </script></head><body>    红色：<input type="range" value="0" min="0" max="255" id="r" /><br />    绿色：<input type="range" value="0" min="0" max="255" id="g" /><br />    蓝色：<input type="range" value="0" min="0" max="255" id="b" /><br /></body>

0 0