Question

我有一段一直在鬼混的代码。该代码的目标是有四个按钮，当您按下打开按钮时，屏幕左上角会打开一个窗口，当您按下移动按钮时，该窗口应该在屏幕开始处无限循环移动。沿X的正方向并顺时针移动。我在窗口沿负X方向移动时遇到问题。每当寡妇到达我的计算机屏幕的右下角时，它就会停止。我不知道如何解决它，我只是想在我希望它移动的方向之前加上一个负号。移动功能位于var moveWindow下。

<html>
    <head>
        <script>
            var aWindow;
            var current = 0;
            function openWindow() {
                aWindow = window.open("", "", "width=400, height = 200");
                aWindow.document.write("This is my new Window");
            }

            function closeWindow(){
                if(aWindow) {
                    aWindow.close();
                }
            }

            var moveWindow = function windowMove() {
                var rightLimit = screen.width -400;
                var topLimit = screen.height - screen.availHeight;
                var bottomLimit = screen.height - 200;
                    if (aWindow) {
                        if (aWindow.screenY <= topLimit && aWindow.screenX != rightLimit) {
                             aWindow.moveBy(100, 0)
                        }
                        else if (aWindow.screenX <= rightLimit && aWindow.screenY != topLimit) {
                            aWindow.moveBy(0, 100)
                        }
                        else if (aWindow.screenY <= topLimit && aWindow.screenX != rightLimit) {
                            aWindow.move(-100, 0)
                        }
                        else if (aWindow.screenX <= rightLimit && aWindow.screenX != topLimit) {
                            aWindow.move(0, -100)
                        }
                    }   
                }
                function startWindow(){
                        timer = setInterval(moveWindow, 350);
                }
                function stopWindow() {
                    clearInterval(startWindow)
                }
</script>
</head>
        </script>
    </head>
    <body>
        <button onclick="openWindow();">Open</button>
        <button onclick="closeWindow();">Close</button>
        <button onclick="startWindow();">Move</button>
        <button onclick="stopWindow();">Stop</button>


    </body>
</html>

Answer 1

您的情况有几个问题：

当您到达边界时，不平等（!=）通常也成立。这是因为窗口不会完全按照您计划的偏移量停下来。
外部窗口的尺寸大于400x200像素，因为有边框。这会使您目前为rightLimit（和其他此类变量）获得的值太紧。
您正在测试topLimit，但从未测试过bottomLimit。也没有提供类似leftLimit之类的规定。
您将错误的变量传递给clearInterval

由于有几个度量标准会影响弹出窗口的位置（如边框，距屏幕末端的最小距离等），因此很难确定它在侧面的确切位置。由于Windows不允许弹出窗口移出屏幕之外，因此让弹出窗口移动并查看其是否实际移动会更容易。万一没有，那你就知道那边已经到了，方向应该改变。

将当前方向保持在变量中也比尝试根据坐标检测当前方向要容易得多。

要检测窗口是否实际移动，需要一些时间延迟才能进行移动，因此我将为此引入setTimeout。但是否则代码可以大大简化：

var aWindow;
var current = 0; // We will use this to denote the current direction

function openWindow() {
    aWindow = window.open("", "", "width=400, height = 200");
    aWindow.document.write("This is my new Window");
}

function closeWindow(){
    if (aWindow) {
        aWindow.close();
    }
}

var moveWindow = function windowMove() {
    if (aWindow) {
        var x = aWindow.screenX;
        var y = aWindow.screenY;
        aWindow.moveBy([100,0,-100,0][current], [0,100,0,-100][current]);
        setTimeout(function () {
            if (x === aWindow.screenX && y === aWindow.screenY) { // nothing moved
                current = (current + 1) % 4; // next direction
                windowMove(); // call an extra time to make the move in the next direction
            }
        }, 50);
    }
}

var timer; // better declare it
function startWindow(){
    timer = setInterval(moveWindow, 350);
}
function stopWindow() {
    clearInterval(timer); // <--- timer
}

window.move向负方向问题

1 个答案: