js 背景调色板

最新推荐文章于 2024-07-04 14:40:01 发布

神奇大叔

最新推荐文章于 2024-07-04 14:40:01 发布

阅读量301

点赞数 1

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103281906

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

<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
评论
js 背景调色板

<html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-color:rgb(200,200,200) } </style> </head> <body&gt...
复制链接

扫一扫

专栏目录