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>