实现了一些视频中的功能
代码如下
进行了一个简单的实现(需要引进一下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>