这个不用多说,直接贴代码,
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘事件延迟</title> 6 <style type="text/css"> 7 #div{ 8 100px; 9 height: 100px; 10 background-color: greenyellow; 11 position: absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="div"></div> 17 </body> 18 <script type="text/javascript"> 19 window.onload=function(){ 20 21 22 var div=document.getElementById("div"); 23 var offsetx=div.offsetLeft; 24 var offsety=div.offsetTop; 25 var left=false; 26 var right=false; 27 var top=false; 28 var bottom=false; 29 //这里采用计时器消除键盘事件的延迟问题,可直接贴码验证一下 30 setInterval(function() { 31 if (left) { 32 offsetx-=10; 33 div.style.left=offsetx+"px"; 34 }else if (right) { 35 offsetx+=10; 36 div.style.left=offsetx+"px"; 37 }else if (top) { 38 offsety-=10; 39 div.style.top=offsety+"px"; 40 }else if (bottom) { 41 offsety+=10; 42 div.style.top=offsety+"px"; 43 } 44 },50) 45 document.onkeydown=function(event){ 46 switch (event.keyCode){ 47 case 37: 48 left=true; 49 break; 50 case 38: 51 top=true; 52 break; 53 case 39: 54 right=true; 55 break; 56 case 40: 57 bottom=true; 58 break; 59 default: 60 break; 61 } 62 } 63 document.onkeyup=function(event){ 64 switch (event.keyCode){ 65 case 37: 66 left=false; 67 break; 68 case 38: 69 top=false; 70 break; 71 case 39: 72 right=false; 73 break; 74 case 40: 75 bottom=false; 76 break; 77 default: 78 break; 79 } 80 81 } 82 } 83 </script> 84 </html>
代码不多,希望对需要的人有帮助...