<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
switch(event.keyCode){
case 37:
box.style.left = box.offsetLeft-10+"px";
break;
case 38:
box.style.top = box.offsetHeight-10+"px";
break;
case 39:
box.style.left = box.offsetLeft+10+"px";
break;
case 40:
box.style.top = box.offsetHeight+10+"px";
break;
default:
alert("请按下方向键");
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
offsetHeight是div高度，值不变都是一样的所以看起来就是一次性效果，改为offsetTop
document.body.offsetHeight 网页可见区域高（包括边线的高）：
offsetTop: 当前元素顶部距离最近父元素顶部的距离
所以改成offsetTop
case 38:
//向top移动时，用来判断到top边距
box.style.top = box.offsetTop-10+"px";
break;