html+js自定义颜色选择器

最新推荐文章于 2023-03-11 12:37:35 发布

diaoting2815

最新推荐文章于 2023-03-11 12:37:35 发布

阅读量881

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/MrZWJ/p/10004170.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        div{
            width:150px;
            height:150px;
            border:solid black 1px;
            background: #rgb(255,255,255);//初始默认为白色
        　　}
    </style>
</head>

<body>
<div id="d"></div>
红:<input type="range" id="r" min="0" max="255" value="255" οnchange="changeColor()"><br>
绿:<input type="range" id="g" min="0" max="255" value="255" οnchange="changeColor()"><br>
蓝:<input type="range" id="b" min="0" max="255" value="255" οnchange="changeColor()"><br>

<script>
    function changeColor(){
        var r=document.getElementById("r").value;
        var g=document.getElementById("g").value;
        var b=document.getElementById("b").value;
        var div=document.getElementById("d");
        div.style.background="rgb("+r+","+g+","+b+")";
    }
</script>
</body>
</html>

效果图如下图：