CSS3 range滑块变色

最新推荐文章于 2024-05-28 09:53:05 发布

Y__Cheng

最新推荐文章于 2024-05-28 09:53:05 发布

阅读量3.1k

点赞数 1

文章标签： CSS3 RGB range滑块

本文链接：https://blog.csdn.net/qq_33744228/article/details/77899331

版权

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

Y__Cheng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3 range滑块变色

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } input[type="range"]{ -web
复制链接

扫一扫