1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 使div可以根据不同的方向键移动 10 按左键 向左移 11 按右键 向右移 12 按上键 向上移 13 按下键 向下移 14 */ 15 window.onload=function() 16 { 17 var box1=document.getElementById("box1"); 18 //为document绑定一个按键按下的事件 19 document.onkeydown=function(event){ 20 event=event||window.event; 21 //定义一个变量，来表示移动的速度 当用户ctrl以后，速度加快 22 var speed=10; 23 if(event.ctrlKey){ 24 speed=500; 25 } 26 var speed=10; 27 switch(event.keyCode){ 28 case 37: 29 box1.style.left=box1.offsetLeft-speed+"px"; 30 break; 31 case 39: 32 box1.style.left=box1.offsetLeft+speed+"px"; 33 break; 34 case 38: 35 box1.style.top=box1.offsetTop-speed+"px"; 36 break; 37 case 40: 38 box1.style.top=box1.offsetTop+speed+"px"; 39 break; 40 } 41 }; 42 }; 43 </script> 44 <style type="text/css"> 45 #box1{ 46 width:100px; 47 height:100px; 48 background-color:red; 49 position:absolute; 50 } 51 </style> 52 <body> 53 <div id="box1"></div> 54 </body> 55 </html>