1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>键盘控制平滑运动</title> 6 <style type="text/css"> 7 .div { 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 position: absolute; 12 top: 0; 13 left: 100px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="div"></div> 19 </body> 20 <script type="text/javascript"> 21 var div = document.querySelector(‘.div‘) 22 var l_able = false; 23 var r_able = false; 24 var t_able = false; 25 var b_able = false; 26 setInterval(function () { 27 if (l_able) { 28 div.style.left = div.offsetLeft - 3 + ‘px‘; 29 }; 30 r_able && (div.style.left = div.offsetLeft + 3 + ‘px‘) 31 t_able && (div.style.top = div.offsetTop - 3 + ‘px‘) 32 b_able && (div.style.top = div.offsetTop + 3 + ‘px‘) 33 34 }, 16); 35 document.onkeydown = function (ev) { 36 switch(ev.keyCode) { 37 case 37: l_able = true;break; 38 case 39: r_able = true;break; 39 case 38: t_able = true;break; 40 case 40: b_able = true;break; 41 }; 42 }; 43 document.onkeyup = function (ev) { 44 switch(ev.keyCode) { 45 case 37: l_able = false;break; 46 case 39: r_able = false;break; 47 case 38: t_able = false;break; 48 case 40: b_able = false;break; 49 }; 50 }; 51 </script> 52 </html>
原文：https://www.cnblogs.com/xuqidong/p/12113057.html