按键变色

这个例子主要是如何合理的封装函数
功能是当用户点击见键盘上的按键的时候，对应的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>