<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘控制方块移动</title>
<style>
#box{
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// var box=document.getElementById('box');//此部分代码的效果会用小小的停顿，下面的为改进代码
// var l=0;
// var t=0;
// document.onkeydown=function(){
// var e=window.event||ev;
// // console.log(e.keyCode);
// if (e.keyCode==37) {
// l-=10;
// box.style.
// left=l+'px';
// }
// if (e.keyCode==38) {
// t-=10;
// box.style.top=t+'px';
// }
// if (e.keyCode==39) {
// l+=10;
// box.style.left=l+'px';
// }
// if (e.keyCode==40) {
// t+=10;
// box.style.top=t+'px';
// }
// }
var div=document.getElementById('box');
var s=0,left=0,right=0,bottom=0;//用top不可以，为保留字；
var timer=null,x=50,y=50;
timer=setInterval(function(){
if (left==1) {
x-=5;
div.style.left=x+'px';
}
if (right==1) {
x+=5;
div.style.left=x+'px';
}
if (s==1) {
y-=5;
div.style.top=y+'px';
}
if (bottom==1) {
y+=5;
div.style.top=y+'px';
}
},20)
document.onkeydown=function(ev){
var e=ev||window.event;
switch(e.keyCode){
case 37:
left=1;
break;
case 38:
s=1;
break;
case 39:
right=1;
break;
case 40:
bottom=1;
break;
default:
alert('请按方向键');
}
}
document.onkeyup=function(ev){
var e=ev||window.event;
switch(e.keyCode){
case 37:
left=0;
break;
case 38:
s=0;
break;
case 39:
right=0;
break;
case 40:
bottom=0;
break;
default:
alert('请按方向键');
}
}
</script>
</body>
</html>
