js 背景调色板

<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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值