键盘控制平滑运动

 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>