JavaScript学习-键盘码_onkeyborad-优快云博客

本文链接：https://blog.youkuaiyun.com/Cairo960918/article/details/82534040
思路如下：1。创建函数onkeyboradEvent（事件），根据开关针对不同按键代表不同的数字来执行;
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>
代码网页实现如下图：
按ķ实现ķ变色。