JavaScript实现调色板功能-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51492530

本文介绍了如何使用JavaScript创建和操作调色板。通过一种简单的方法，你可以动态生成颜色选择器，为用户提供自定义颜色的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

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

js调色板