js 背景调色板-蒲公英云

js 背景调色板

叁歲伎倆 2021-07-24 17:10 401阅读 0赞

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{ 
                background-color:rgb(200,200,200)
            }
        </style>
    </head>
    <body>
        <p>
            <span>R:</span>
            <button class="rsub">-</button>
            <input type="text" class="rinput" placeholder="200" />
            <button class="radd">+</button>
        </p>
        <p>
            <span>G:</span>
            <button class="gsub">-</button>
            <input type="text" class="ginput" placeholder="200"/>
            <button class="gadd">+</button>
        </p>
        <p>
            <span>B:</span>
            <button class="bsub">-</button>
            <input type="text" class="binput" placeholder="200"/>
            <button class="badd">+</button>
        </p>
        <button class="go">走</button>
        <script>
            var rsBtn=document.querySelector(".rsub");
            var rinput=document.querySelector(".rinput");
            var radd=document.querySelector(".radd");
            var gsBtn=document.querySelector(".gsub");
            var ginput=document.querySelector(".ginput");
            var gadd=document.querySelector(".gadd");
            var bsBtn=document.querySelector(".bsub");
            var binput=document.querySelector(".binput");
            var badd=document.querySelector(".badd");
            var go=document.querySelector(".go")
            /*定义信号量*/
            var r=200;
            var g=200;
            var b=200;
            rinput.value=r;
            ginput.value=g;
            binput.value=b;
            /*设置事件绑定*/
            /*红色绑定事件*/
            rsBtn.onclick=function(){ 
                /*校验范围*/
                r--;
                if(r<0)
                { 
                    r=0;
                }
                /*输入框值得改变*/
                rinput.value=r;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            radd.onclick=function(){ 
                r++;
                if(r>255)
                { 
                    r=255;
                }
                /*输入框值得改变*/
                rinput.value=r;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            /*绿色绑定事件*/
            gsBtn.onclick=function(){ 
                g--;
                if(g<0)
                { 
                    g=0;
                }
                /*输入框值得改变*/
                ginput.value=g;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            gadd.onclick=function(){ 
                g++;
                if(g>255)
                { 
                    g=255;
                }
                /*输入框值得改变*/
                ginput.value=g;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            /*蓝色绑定事件*/
            bsBtn.onclick=function(){ 
                b--;
                if(b<0)
                { 
                    b=0;
                }
                /*输入框值得改变*/
                binput.value=b;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            badd.onclick=function(){ 
                b++;
                if(b>255)
                { 
                    b=255;
                }
                /*输入框值得改变*/
                binput.value=b;
                /*背景颜色改变*/
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
            go.onclick=function(){ 
                r=rinput.value;
                g=ginput.value;
                b=binput.value;
                    if(r<0)
                { 
                    r=0;
                }
                    if(r>255)
                { 
                    r=255;
                }
                if(g<0)
                { 
                    g=0;
                }
                if(g>255)
                { 
                    g=255;
                }
                    if(b<0)
                { 
                    b=0;
                }
                    if(b>255)
                { 
                    b=255;
                }
                rinput.value=r;
                ginput.value=g;
                binput.value=b;
                document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
        </script>
    </body>
</html>