<!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" οnchange="chenge1()"><span></span></p> <p> G <input type="range" min="0" max="255" οnchange="chenge1()"><span></span></p> <p> B <input type="range" min="0" max="255" οnchange="chenge1()"><span></span></p> <p> T <input type="range" min="0" max="1" step="0.1" value="1" οnchange="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>
CSS3 range滑块变色
最新推荐文章于 2024-05-28 09:53:05 发布