1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style type="text/css">
    9.         .container{
    10.             width: 200px;
    11.             height: 360px;
    12.             background-color: antiquewhite;
    13.             position: relative;
    14.         }
    15.         .actvity_model{
    16.             width: 20px;
    17.             height: 20px;
    18.             background-color: cornflowerblue;
    19.             border: .3px solid #eee;
    20.             box-sizing: border-box;
    21.             position: absolute;
    22.         }
    23.     </style>
    24. </head>
    25. <body onload="init();">
    26.     <!-- 背景容器 -->
    27.     <div class="container">
    28.         <!-- 块元素 -->
    29.         <div class="actvity_model"></div>
    30.     </div>
    32.     <script>
    33.         //创建一个常量控制步长
    34.         const STEP = 20;
    35.         //入口方法
    36.         function init(){
    37.             onKeyDown();
    38.         }
    39.         //监听用户键盘事件
    40.         function onKeyDown(){
    41.             document.onkeydown = function(evnet){
    42.                 switch(event.keyCode){
    43.                     case 38:
    44.                         console.log("上");
    45.                         move(0,-1);
    46.                         break;
    47.                     case 39:
    48.                         console.log("右");
    49.                         move(1,0);
    50.                         break;
    51.                     case 40:
    52.                         console.log("下");
    53.                         move(0,1);
    54.                         break;
    55.                     case 37:
    56.                         console.log("左");
    57.                         move(-1,0);
    58.                         break;
    59.                 }
    60.             }
    61.         }
    63.         //控制块元素移动
    64.         function move(x,y){
    65.             var actvityModelEle = document.querySelector(".actvity_model");
    66.             actvityModelEle.style.top = parseInt(actvityModelEle.style.top || 0) + y * STEP + "px";
    67.             actvityModelEle.style.left = parseInt(actvityModelEle.style.left || 0) + x * STEP + "px";
    68.         }
    69.     </script>
    70. </body>
    71. </html>