CSS3 range滑块变色

来源：互联网发布：淘宝领取的优酷会员编辑：程序博客网时间：2024/06/04 19:24
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        input[type="range"]{            -webkit-box-shadow: 0 1px 0 0 #424242, 0 1px 0 #060607 inset, 0 2px 10px  black inset,            0 -2px 10px black inset;            border-radius: 15px;            width: 300px;            height:10px;        }       body{            width: 100%;            height: 650px;            background: #fff;            overflow: hidden;        }        div{            width: 100%;            height: 650px;        }    </style></head><body><div><p> R <input type="range" min="0" max="255" onchange="chenge1()"><span></span></p><p> G <input type="range" min="0" max="255" onchange="chenge1()"><span></span></p><p> B <input type="range" min="0" max="255" onchange="chenge1()"><span></span></p><p> T <input type="range" min="0" max="1" step="0.1"  value="1" onchange="chenge1()"><span></span></p></div><!--javascript--><script>    var input=document.getElementsByTagName('input');    var span=document.getElementsByTagName('span');    var p=document.getElementsByTagName('p');    var div=document.getElementsByTagName('div')[0];        for(let i=0;i<input.length;i++){                span[i].innerHTML=input[i].value;            }    function chenge1(){        for(let i=0;i<input.length;i++){            span[i].innerHTML=input[i].value;            console.log(input[i].value);            p[i].style.color=`rgba(${(255-span[0].innerHTML)},${(255-span[1].innerHTML)},                                                ${(255-span[2].innerHTML)},${span[3].innerHTML})`        }        console.log(1);        div.style.backgroundColor=`rgba(${span[0].innerHTML},${span[1].innerHTML},                                                ${span[2].innerHTML},${span[3].innerHTML})`    }</script></body></html>
阅读全文
0 0