青训营笔记|css

50 阅读1分钟

实现了一些视频中的功能

image.png

代码如下

进行了一个简单的实现(需要引进一下jQuery)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.staticfile.org/bootstrap/5.2.3/css/bootstrap-grid.css"></script>-->
    <script src="jquery.min.js"></script>
    <script src="index.js"></script>

</head>
<body>


<div class="row">
    <label for="Red" class="form-label">Red</label>
    <input type="range" class="form-range" min="0" max="255" id="Red" oninput="app()">
    <span id="Redt"></span>
</div>

<div class="row">
    <label for="Blue" class="form-label">Blue</label>
    <input type="range" class="form-range" min="0" max="255" id="Blue" oninput="app()">
    <span id="Bluet"></span>
</div>

<div class="row">
    <label for="Green" class="form-label">Green</label>
    <input type="range" class="form-range" min="0" max="255" id="Green" oninput="app()">
    <span id="Greent"></span>
</div>

<div id="hh" style="height: 300px; width: 300px; background: rgb(128,128,128)"></div>

</body>
</html>
<script>
    function app(){
        $("#Redt").html($("#Red").val())
        $("#Bluet").html($("#Blue").val())
        $("#Greent").html($("#Green").val())
        let a = "rgb(" + $("#Red").val() +","+$("#Green").val()+","+ $("#Blue").val() +")"
        $("#hh").css("background",a)
    }


</script>