薛乎乎~ 2024-04-22 22:29 采纳率: 81%
浏览 12
已结题

如何实现通过方向键控制div的上下左右移动可能出现问题处 box1.style.left=box1.offsetLeft+speed+"px"

在下列代码上进行修改，如何实现通过方向键控制div的上下左右移动
可能出现问题处
box1.style.left=box1.offsetLeft+speed+"px";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }
    </style>
    <script>
        //使div可以根据不同的方向键向不同的方向移动
        /*
        *按左键，div向左移动37
        *按右键，div向右移动39
        *按上键，div向上移动38
        *按下键，div向下移动40
        */
       
       var box1=document.getElementById("box1");
       document.onkeydown=function(event){
        event=event||window.event;
        var speed=10;
        //当用户按了ctrl,速度加快
        if(event.ctrlKey){
            speed*=2
        }
        switch(event.keyCode){
            case 37:
                //alert("向左移动");
                box1.style.left=box1.offsetLeft-speed+"px";
                break;
            case 38:
                alert("向上移动");
                box1.style.top=box1.offsetTop-speed+"px";
                break;p
            case 39:
                alert("向右移动");
                box1.style.left=box1.offsetLeft+speed+"px";
                break;
            case 40:
                alert("向下移动");
                box1.style.top=box1.offsetTop+p+"speedx";
                break;
        }
        // if(event.keyCode==37&&event.clientX!=0){
        //     event.clientX=event.clientX-100+"px";
            
        // };
       }

    </script>
</head>
<body>
    <div id="box1"></div>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • GISer Liu 2024-04-22 22:54
    关注

    该回答引用自GPT-3.5,由博主GISer Liu编写：

    首先，我们需要修改代码以实现通过方向键控制 div
    的上下左右移动。在你提供的代码中，存在一些问题，比如在处理向下移动时的错误。下面是我的解决思路和修改后的代码：

    解决思路：

    1. 使用 keydown 事件监听用户按下方向键的操作。
    2. 根据按键的 keyCode，确定用户按下的是哪个方向键。
    3. 根据按键的不同，调整 div 元素的 left 或 top 属性，实现移动。

      修改后的代码：

      htmlCopy code
      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
var speed = 10;
document.onkeydown = function(event) {
event = event || window.event;
// 当用户按了 ctrl 键时，速度加倍
if (event.ctrlKey) {
speed *= 2;
}
switch (event.keyCode) {
case 37: // 向左移动
box1.style.left = (box1.offsetLeft - speed) + "px";
break;
case 38: // 向上移动
box1.style.top = (box1.offsetTop - speed) + "px";
break;
case 39: // 向右移动
box1.style.left = (box1.offsetLeft + speed) + "px";
break;
case 40: // 向下移动
box1.style.top = (box1.offsetTop + speed) + "px";
break;
}
}
</script>
</body>
</html>

      修改原因和方法：

    • 在向左和向上移动时，需要将 speed 直接减去，因为左上移动是减少坐标值。
    • 在向右和向下移动时，需要将 speed 直接加上，因为右下移动是增加坐标值。
    • 移动时，需要设置 div 元素的 left 或 top 属性来改变其位置。
      这样就可以通过方向键控制 div 的上下左右移动了。

    如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 5月1日
  • 已采纳回答 4月23日
  • 创建了问题 4月22日