按键变色

按键变色

这个例子主要是如何合理的封装函数
功能是当用户点击见键盘上的按键的时候，对应的div背景色发生改变。如：p(pink)
效果如下：

head部分

	<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<style>
	.wrap {
		margin: 50px auto;
		height: 400px;
		width: 400px;
		text-align: center;
		border: 1px solid #ccc;
	}
	p {
		margin-top: 20px;
		font: 700 20px/40px "microsoft yahei";
	}
	.center {
		height: 200px;
		width: 200px;
		margin: 0 auto;
		background-color: pink;
	}
	.center span {
		font: 500 14px/200px "microsoft yahei";
	}
</style>

body部分

<div class="wrap">
		<p>按键改变颜色</p>
		<div class="center" id="center">
			您按下的是：<span id="key">80</span>键
		</div>
	</div>
	<script>
		$(function(){
			//需求1：当用户按键盘上的某个键时，center的背景颜色发生改变。例如：p键变成pink颜色
			//需求2：将用户按的键值添加到span标签中去
			//
			//
			var div = $("#center");
			var span = $("#key");
			$(document).keyup(function(e){
				getStyle(e.keyCode);
			});
			function getStyle(code) {
               //alert(e.keyCode);
               //2.获取值，根据此值，给div和span上色和内容
               switch (code){
               	case 80:
                       //修改内容pink
                       setContent("pink",code);
                       break;
                       case 66:
                       //修改内容blue
                       setContent("blue",code);
                       break;
                       case 79:
                       //修改内容orange
                       setContent("orange",code);
                       break;
                       case 82:
                       //修改内容red
                       setContent("red",code);
                       break;
                       case 89:
                       //修改内容yellow
                       setContent("yellow",code);
                       break;
                       default :
                       alert("系统没有设置该颜色！");
                   }
                   function setContent(a,b){
                   	div.css("background-color",a);
                   	span.text(b);
                   }
               }
           });
           </script>