javascript - window.move 在负方向问题

问题描述

我有一段代码一直在玩弄。代码的目标是有四个按钮，当你按下打开按钮时，屏幕左上角会打开一个窗口，当你按下移动按钮时，窗口应该在屏幕周围无限循环移动在正 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>

标签： javascript

您的条件有几个问题：

当您到达边界时，不等式 ( !=) 通常也会成立。这是因为窗口不会完全停在您为其计划的偏移处。
外部窗口大小大于 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
}

javascript - window.move 在负方向问题

问题描述

解决方案

推荐阅读