<!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>