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>