思路如下：1.创建函数onkeyboradEvent(event),根据switch针对不同按键代表不同的数字来执行；
2.创建keydown事件监听器针对每一次键盘按下事件进行分析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>keyboard</title>
<style>
#keyboard{
width:760px;
height:200px;
border:1px solid;
}
.key{
width:50px;
height:50px;
border:1px solid;
position:absolute;
font-size:16px;
text-align:center;
}
</style>
<script>
window.onload=function(){
function change(){
for(var i=0;i<30;i++){
document.getElementsByClassName("key")[i].style.backgroundColor="#ffffff";
}
}
function onKeyboardEvent (event){
switch(event.keyCode){
//q
case 81:
document.getElementsByClassName("key")[0].style.backgroundColor="#123456";
break;
//w
case 87:
document.getElementsByClassName("key")[1].style.backgroundColor="#123456";
break;
//e
case 69:
document.getElementsByClassName("key")[2].style.backgroundColor="#123456";
break;
//r
case 82:
document.getElementsByClassName("key")[3].style.backgroundColor="#123456";
break;
//t
case 84:
document.getElementsByClassName("key")[4].style.backgroundColor="#123456";
break;
//y
case 89:
document.getElementsByClassName("key")[5].style.backgroundColor="#123456";
break;
//u
case 85:
document.getElementsByClassName("key")[6].style.backgroundColor="#123456";
break;
//i
case 73:
document.getElementsByClassName("key")[7].style.backgroundColor="#123456";
break;
//o
case 79:
document.getElementsByClassName("key")[8].style.backgroundColor="#123456";
break;
//p
case 80:
document.getElementsByClassName("key")[9].style.backgroundColor="#123456";
break;
//a
case 65:
document.getElementsByClassName("key")[10].style.backgroundColor="#123456";
break;
//s
case 83:
document.getElementsByClassName("key")[11].style.backgroundColor="#123456";
break;
//d
case 68:
document.getElementsByClassName("key")[12].style.backgroundColor="#123456";
break;
//f
case 70:
document.getElementsByClassName("key")[13].style.backgroundColor="#123456";
break;
//g
case 71:
document.getElementsByClassName("key")[14].style.backgroundColor="#123456";
break;
//h
case 72:
document.getElementsByClassName("key")[15].style.backgroundColor="#123456";
break;
//j
case 74:
document.getElementsByClassName("key")[16].style.backgroundColor="#123456";
break;
//k
case 75:
document.getElementsByClassName("key")[17].style.backgroundColor="#123456";
break;
//l
case 76:
document.getElementsByClassName("key")[18].style.backgroundColor="#123456";
break;
//up
case 38:
document.getElementsByClassName("key")[19].style.backgroundColor="#123456";
break;
//z
case 90:
document.getElementsByClassName("key")[20].style.backgroundColor="#123456";
break;
//x
case 88:
document.getElementsByClassName("key")[21].style.backgroundColor="#123456";
break;
//c
case 67:
document.getElementsByClassName("key")[22].style.backgroundColor="#123456";
break;
//v
case 86:
document.getElementsByClassName("key")[23].style.backgroundColor="#123456";
break;
//b
case 66:
document.getElementsByClassName("key")[24].style.backgroundColor="#123456";
break;
//n
case 78:
document.getElementsByClassName("key")[25].style.backgroundColor="#123456";
break;
//m
case 77:
document.getElementsByClassName("key")[26].style.backgroundColor="#123456";
break;
//left
case 37:
document.getElementsByClassName("key")[27].style.backgroundColor="#123456";
break;
//down
case 40:
document.getElementsByClassName("key")[28].style.backgroundColor="#123456";
break;
//right
case 39:
document.getElementsByClassName("key")[29].style.backgroundColor="#123456";
break;
default:
console.log(event.keyCode);
}
}
window.addEventListener('keydown',onKeyboardEvent,false);
window.addEventListener('keyup',change,false);
};
</script>
</head>
<body>
<div id="keyboard">
<div class="key" style="margin-left:10px;margin-top:10px;">Q</div>
<div class="key" style="margin-left:70px;margin-top:10px;">W</div>
<div class="key" style="margin-left:130px;margin-top:10px;">E</div>
<div class="key" style="margin-left:190px;margin-top:10px;">R</div>
<div class="key" style="margin-left:250px;margin-top:10px;">T</div>
<div class="key" style="margin-left:310px;margin-top:10px;">Y</div>
<div class="key" style="margin-left:370px;margin-top:10px;">U</div>
<div class="key" style="margin-left:430px;margin-top:10px;">I</div>
<div class="key" style="margin-left:490px;margin-top:10px;">O</div>
<div class="key" style="margin-left:550px;margin-top:10px;">P</div>
<div class="key" style="margin-left:30px;margin-top:75px;">A</div>
<div class="key" style="margin-left:90px;margin-top:75px;">S</div>
<div class="key" style="margin-left:150px;margin-top:75px;">D</div>
<div class="key" style="margin-left:210px;margin-top:75px;">F</div>
<div class="key" style="margin-left:270px;margin-top:75px;">G</div>
<div class="key" style="margin-left:330px;margin-top:75px;">H</div>
<div class="key" style="margin-left:390px;margin-top:75px;">J</div>
<div class="key" style="margin-left:450px;margin-top:75px;">K</div>
<div class="key" style="margin-left:510px;margin-top:75px;">L</div>
<div class="key" style="margin-left:620px;margin-top:75px;">UP</div>
<div class="key" style="margin-left:50px;margin-top:140px;">Z</div>
<div class="key" style="margin-left:110px;margin-top:140px;">X</div>
<div class="key" style="margin-left:170px;margin-top:140px;">C</div>
<div class="key" style="margin-left:230px;margin-top:140px;">V</div>
<div class="key" style="margin-left:290px;margin-top:140px;">B</div>
<div class="key" style="margin-left:350px;margin-top:140px;">N</div>
<div class="key" style="margin-left:410px;margin-top:140px;">M</div>
<div class="key" style="margin-left:550px;margin-top:140px;">LEFT</div>
<div class="key" style="margin-left:620px;margin-top:140px;">DOWN</div>
<div class="key" style="margin-left:690px;margin-top:140px;">RIGHT</div>
</div>
</body>
</html>代码网页实现如下图：
按k实现k变色。
