通过键盘方向键，控制一个div盒子在屏幕上移动

最新推荐文章于 2022-09-17 14:49:54 发布

会写BUG的老中医

最新推荐文章于 2022-09-17 14:49:54 发布

阅读量706

点赞数 4

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_59310979/article/details/122139585

版权

学了DOM的小伙伴几乎都遇到过这个小作业，废话不多说，上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div  id="user" style="height: 200px;width: 300px;background-color: royalblue;  position:absolute;"></div>
//定义一个盒子模型
   
    <script> 
     document.onkeydown= function fn(e){          //进行盒子移动
     var oDiv = document.getElementById('user');  //找到盒子的ID
           //var oEvent = e||event;
       
                 switch(e.keyCode){                  
     //进行一个键盘字符的判断 左上右下分别对应的码值是 37、38、39、40
                      case 37: oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                            break;
                      case 38: oDiv.style.top = oDiv.offsetTop - 10 + 'px';
                              break;

                      case 39: oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                            break;

                      case 40: oDiv.style.top = oDiv.offsetTop + 10 + 'px';
                            break;
         }

      }
    </script>
</body>
</html>