<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:rgb(200,200,200)
}
</style>
</head>
<body>
<p>
<span>R:</span>
<button class="rsub">-</button>
<input type="text" class="rinput" placeholder="200" />
<button class="radd">+</button>
</p>
<p>
<span>G:</span>
<button class="gsub">-</button>
<input type="text" class="ginput" placeholder="200"/>
<button class="gadd">+</button>
</p>
<p>
<span>B:</span>
<button class="bsub">-</button>
<input type="text" class="binput" placeholder="200"/>
<button class="badd">+</button>
</p>
<button class="go">走</button>
<script>
var rsBtn=document.querySelector(".rsub");
var rinput=document.querySelector(".rinput");
var radd=document.querySelector(".radd");
var gsBtn=document.querySelector(".gsub");
var ginput=document.querySelector(".ginput");
var gadd=document.querySelector(".gadd");
var bsBtn=document.querySelector(".bsub");
var binput=document.querySelector(".binput");
var badd=document.querySelector(".badd");
var go=document.querySelector(".go")
/*定义信号量*/
var r=200;
var g=200;
var b=200;
rinput.value=r;
ginput.value=g;
binput.value=b;
/*设置事件绑定*/
/*红色绑定事件*/
rsBtn.onclick=function(){
/*校验范围*/
r--;
if(r<0)
{
r=0;
}
/*输入框值得改变*/
rinput.value=r;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
radd.onclick=function(){
r++;
if(r>255)
{
r=255;
}
/*输入框值得改变*/
rinput.value=r;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
/*绿色绑定事件*/
gsBtn.onclick=function(){
g--;
if(g<0)
{
g=0;
}
/*输入框值得改变*/
ginput.value=g;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
gadd.onclick=function(){
g++;
if(g>255)
{
g=255;
}
/*输入框值得改变*/
ginput.value=g;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
/*蓝色绑定事件*/
bsBtn.onclick=function(){
b--;
if(b<0)
{
b=0;
}
/*输入框值得改变*/
binput.value=b;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
badd.onclick=function(){
b++;
if(b>255)
{
b=255;
}
/*输入框值得改变*/
binput.value=b;
/*背景颜色改变*/
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
go.onclick=function(){
r=rinput.value;
g=ginput.value;
b=binput.value;
if(r<0)
{
r=0;
}
if(r>255)
{
r=255;
}
if(g<0)
{
g=0;
}
if(g>255)
{
g=255;
}
if(b<0)
{
b=0;
}
if(b>255)
{
b=255;
}
rinput.value=r;
ginput.value=g;
binput.value=b;
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>
js 背景调色板
最新推荐文章于 2024-07-04 14:40:01 发布