使用键盘控制元素的位置
首先，键盘上的每一个键位都有一个对应的代码，我们的操作也是通过把代码发送到计算机，使得计算机能够在屏幕上显示出对应的字母，那么，我们想要控制每个按键对应的行为，就要知道每个按键对应的代码是什么，可以看一下这篇文章
理论不如实践，我直接写一个例子来给大家直观的学习
我定义的元素是一个上了色的div，我们使用上下左右键来控制他的定位，看代码：
<style>
div{
width: 100px;
height: 100px;
background:#FF00DF;
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div></div>
<script>
window.onload=function(){
var xo=document.getElementsByTagName("div")[0];
document.onkeydown=function(event){
event=event||window.event;
var speed=20;
switch(event.keyCode){
case 37:xo.style.left=xo.offsetLeft-20+"px";break;
case 38:xo.style.top=xo.offsetTop-20+"px";break;
case 39:xo.style.left=xo.offsetLeft+20+"px";break;
case 40:xo.style.top=xo.offsetTop+20+"px";break;
case 65:xo.style.left=xo.offsetLeft-20+"px";break;
case 87:xo.style.top=xo.offsetTop-20+"px";break;
case 68:xo.style.left=xo.offsetLeft+20+"px";break;
case 83:xo.style.top=xo.offsetTop+20+"px";break;
}
}
}
</script>
<body/>
呈现出来的效果就是一个红色框框，如图
左上右下对应的代码分别是37,38,39,40
代码中也写了每个代码对应的操作，而65,87,68,83对应的是a,w,d,s
这时候WASD也可以操作上下左右了，感兴趣的可以试一下
