HTML-Circle 不向右或向下移动答案

【问题标题】：HTML-Circle doesnt move right or bottomHTML-Circle 不向右或向下移动
【发布时间】：2022-08-16 22:08:12
【问题描述】：

我在 HTML 中迈出了第一步，我希望我的代码执行以下操作：

当按下右箭头键时，将圆圈移动到右侧

当按下向下箭头键时，将圆圈移动到底部

但相反，它执行以下操作：当按下这些键中的一个时，他只移动一次并且不再移动。为什么是这样？

<html>
    <head>
        <title>HTML Test</title>
        <style>
            #circle {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background: red;
                                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id=\"circle\"></div>
    </body>
    <script>
        document.onkeydown = function (event) {
            var circle = document.getElementById(\"circle\");
        
            if (event.keyCode == 39) {
                circle.style.left += 100;
                console.log(\"right\")
            } else if (event.keyCode == 40) {
                circle.style.top += 100;
                console.log(\"bottom\")
            }
        }
    </script>
</html>

您需要将...style.left 和....style.top 转换为不带单位的浮点数/数字，添加您希望它移动的值，再次将其转换回px 并将该值分配给.style. 基本上，那些样式属性是需要首先转换为数值的字符串....拖累，我知道...
哦，这听起来很糟糕，但我们开始吧
另外，我刚刚意识到，您需要使用window.getComputedStyle(...) 来获取这些属性的当前实际值。 .style. 仅包含 CSS 中定义的值...
似乎元素不是为我想在这里做的事情而制作的。我应该用帆布。

标签： javascript html css

【解决方案1】：

你忘了单位！

我更改了您的 sn-p 以将实际值保留在 2 个变量中，并添加了一个函数来通过使用这些变量并附加单位来更新圆形样式属性。

<html>
    <head>
        <title>HTML Test</title>
        <style>
            #circle {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="circle"></div>
    </body>
    <script>
        var circle = document.getElementById("circle");
        var circleLeft = 0;
        var circleTop = 0;
        
        var updatePosition = function(left, top) {
           circle.style.left = left + 'px';
           circle.style.top = top + 'px';
        };

        // once at the start
        updatePosition(circleLeft, circleTop);
        
        document.onkeydown = function (event) {
            if (event.keyCode == 39) {
                circleLeft += 100;
                console.log("right");
            } else if (event.keyCode == 40) {
                circleTop += 100;
                console.log("bottom");
            }
            updatePosition(circleLeft, circleTop);
        }
    </script>
</html>

【讨论】：

【解决方案2】：

这样做可能有一种更优雅的方式，但是作为
Rene 在 cmets 中说，您处理的是字符串而不是数字，因此实际上执行 += 100 之类的简单操作会遇到麻烦。您需要对样式字符串进行子串化，从中解析数字，然后添加您的数字，然后重新将“px”添加到末尾（实际上可能没有必要，因为它似乎推断出 HTML 中的 100 == 100px，但反之则不然。）

这是一个可以将其向左移动的修复程序！

    <script>
        circle.style.left = "0px";
        document.onkeydown = function (event) {
            var circle = document.getElementById("circle");
        
            if (event.keyCode == 39) {
                
                console.log(circle.style.left.substring(0,circle.style.left.length -2))
                circle.style.left = (parseInt(circle.style.left.substring(0,circle.style.left.length -2)) + 100) + "px"
                console.log(circle.style.left)
            } else if (event.keyCode == 40) {
                circle.style.top += 100;
                console.log("bottom")
            }
        }
    </script>

【讨论】：