<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
div{
width: 200px;
height: 200px;
background-color: black;
margin: 100px auto 10px;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div id="div1"></div>
<p>
R(红色)
//因为rgb取值范围为0-255 ， 所以在这里设置一个最大值和最小值 当前值为0
<input type="range" max="255" min="0" value="0" name="red" id="red">
</p>
<p>
G(绿色)
<input type="range" max="255" min="0" value="0" name="green" id="green">
</p>
<p>
B(蓝色)
<input type="range" max="255" min="0" value="0" name="blue" id="blue">
</p>
<p>rgb(<em class="ema">0</em>,<em class="emb">0</em>,<em class="emc">0</em>)</p>
</body>
<script>
let red =document.getElementById("red")
let green =document.getElementById("green")
let blue =document.getElementById("blue")
let ema = document.getElementsByClassName("ema")[0]
let emb = document.getElementsByClassName("emb")[0]
let emc = document.getElementsByClassName("emc")[0]
red.oninput = function(){
ema.innerHTML = red.value //将red的值输入进ema这个标签里
bgcolor() //调用bgcolor()这个函数
}
green.oninput = function(){
emb.innerHTML = green.value
bgcolor()
}
blue.oninput = function(){
emc.innerHTML = blue.value
bgcolor()
}
function bgcolor(){
document.getElementById("div1").style.backgroundColor = "rgb(" + ema.innerHTML + "," + emb.innerHTML + "," + emc.innerHTML + ")"
}
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
