在Javascript中退出浏览器窗口后返回对象_Javascript

在Javascript中退出浏览器窗口后返回对象

javascript

在Javascript中退出浏览器窗口后返回对象,javascript,Javascript,我想知道在对象离开浏览器窗口后，如何将其返回到第一个（0）位置。我有一个图像，如果你按下上/下/左/右按钮，它会移动，但它最终会扩展浏览器窗口以下是我已有的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img {

我想知道在对象离开浏览器窗口后，如何将其返回到第一个（0）位置。我有一个图像，如果你按下上/下/左/右按钮，它会移动，但它最终会扩展浏览器窗口

以下是我已有的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">             
       <style>
            img {
                position: absolute;
                top: 500px;
                left: 100px;
            }

            .buttons {
                background-color: aliceblue;
                margin: 0 auto;
                display: flex;
                justify-content: center;
            }
        </style>
        <script type="text/javascript">
            function moveBall(direction) {

                var moveDistance = parseInt(document.getElementById('box').value);
                // alert(moveDistance);

                var currentTop = parseInt(document.getElementById('ball').getBoundingClientRect().top);
                // current position of the ball top side
                var currentLeft = parseInt(document.getElementById('ball').getBoundingClientRect().left);
                // current position of the ball left side

                switch (direction){

                    case 'up':
                        var newTop = currentTop - moveDistance;
                        var newTopString = newTop + "px";
                        document.getElementById('ball').style.top = newTopString;
                        // document.getElementById('carRight').style.left="600px";
                        break;
                    case 'right':
                        var newRight = currentLeft + moveDistance;
                        var newRightString = newRight + "px";
                        document.getElementById('ball').style.left = newRightString;
                        break;
                    case 'down':
                        var newDown = currentTop + moveDistance;
                        var newDownString = newDown + "px";
                        document.getElementById('ball').style.top = newDownString;
                        break;
                    case 'left':
                        var newLeft = currentLeft - moveDistance;
                        var newLeftString = newLeft + "px";
                        document.getElementById('ball').style.left = newLeftString;
                        break;
                }
            }
        </script>
    </head>
    <body>
        <img src="images/ball.png" alt="Ball" id="ball" width="100px" height="100px">
        <div class="buttons">
            <input id="box" type="number">
            <button id="up" onClick="moveBall('up')">Up</button>
            <button id="right" onClick="moveBall('right')">Right</button>
            <button id="down" onClick="moveBall('down')">Down</button>
            <button id="left" onClick="moveBall('left')">Left</button>
        </div>
    </body>
</html>


img{
位置：绝对位置；
顶部：500px；
左：100px；
}
.按钮{
背景色：aliceblue；
保证金：0自动；
显示器：flex；
证明内容：中心；
}
功能移动球（方向）{
var moveDistance=parseInt（document.getElementById（'box'）.value）；
//警报（移动距离）；
var currentTop=parseInt（document.getElementById（'ball'）.getBoundingClientRect（）.top）；
//球顶面的当前位置
var currentLeft=parseInt（document.getElementById（'ball'）.getBoundingClientRect（）.left）；
//球左侧的当前位置
开关（方向）{
案例“向上”：
var newTop=当前顶部-移动距离；
var newTopString=newTop+“px”；
document.getElementById（'ball'）.style.top=newTopString；
//document.getElementById（'carRight'）.style.left=“600px”；
打破
案例“正确”：
var newRight=当前左+移动距离；
var newRightString=newRight+“px”；
document.getElementById（'ball'）.style.left=newRightString；
打破
案例“关闭”：
var newDown=当前顶部+移动距离；
var newDownString=newDown+“px”；
document.getElementById（'ball'）.style.top=newDownString；
打破
案例“左”：
var newLeft=currentLeft-移动距离；
var newLeftString=newLeft+“px”；
document.getElementById（'ball'）.style.left=newLeftString；
打破
}
}
向上的
赖特
向下
左边

我知道这和innerWidth和innerHeight有关，但我就是不知道怎么做

var 
    height = document.body.clientHeight,
    width = document.body.clientWidth;

这将获得边界矩形的宽度，您所要做的就是检查您是否移动到其外部，然后将球的位置设置回

if (newRight > width) newRight = 0;

此外，您可能希望根据您是希望整个球离开边界、其中心还是仅仅触摸边界然后重置来更改此设置。

非常感谢，我可以处理此问题。我只是需要一些东西让我走