限制元素出现在屏幕之外

Question

我试图让一个正方形出现在屏幕的随机位置。我已将其位置属性设置为绝对位置，在 javascript 中我是运行 0 到 100 之间的随机数，然后将其分配为顶部和左侧的百分比属性。但是，如果随机数约为 100 或更少，则方块将出现在屏幕之外。我该如何解决这个问题？

var shape1 = document.getElementById("shape1");

//creating random number to 100
        function randomNum() {
            var r = Math.random();
            var y = (r * (100 - 0 + 1)) + 0;
            var x = Math.floor(y);
            console.log(x);
            return x;
        }
    //reappear at random position
        function reappear(object) {
        object.style.left = randomNum().toString() + "%";
        object.style.top = randomNum().toString() + "%";
        object.style.display = "block";
        }

reappear(shape1);

代码：https://jsfiddle.net/y3m4ygow/1/

Answer 1

您可以在对象上调用 getBoundingClientRect 方法 (MDN reference) 并检查其 bottom 属性是否大于 window.innerHeight (意味着它落在 window 高度之外），或者如果它的 right 属性大于 window.innerWidth（意味着它落在 window 宽度之外），并且如果所以，再次调用重现函数：

    function reappear(object) {
        object.style.left = randomNum().toString() + "%";
        object.style.top = randomNum().toString() + "%";
        object.style.display = "block";
        var rect = object.getBoundingClientRect();
        if(rect.right > window.innerWidth || rect.bottom > window.innerHeight)
            reappear(object);
    }

Fiddle更新：https://jsfiddle.net/y3m4ygow/2/

Answer 2

如您所见，有时对象会从文档中掉出，因为（它的 width 或 height + randomized percentage）超过文档宽度或身高。

例如，假设文档宽度为1000px，随机数结果为90% (=900px)，因为框宽度为200px，所以你将有100px 出屏幕。

现在你有两个解决方案：

首先： 正如@Sidd 指出的那样，您可以使用 getBoundingClientRect 检查盒子是在里面还是在外面，这将 return 一个具有两个属性的变量，一个是 bottom是框距文档上边缘的距离，另一个属性是height这是框距屏幕左边框的距离。
现在您可以将这两个值与文档宽度和高度进行比较。

现在，通过添加这三行，您的问题就会得到解决：

var rect = object.getBoundingClientRect(); // getting the properties

if(rect.right  > window.innerWidth         // comparing width
|| rect.bottom > window.innerHeight)       // comparing height
     {reappear(object);}                   // re-randomizing

https://jsfiddle.net/y3m4ygow/2/
这会起作用，但它可能会在某些浏览器中产生一些闪烁，而且我不太愿意在其内部调用函数。

第二个解决方案是：我希望你这样做，不使用百分比，而是使用固定的高度和宽度值。
您可以从 window 对象获取当前的身高和体重值，并从中减去您的盒子尺寸：
var cHeight = window.innerHeight - 200;
var cWidth = window.innerWidth - 200;
将这两个设置为顶部和右侧的最大值。

function topRandomNum() { var r = Math.random(); var y = (r * (cHeight - 0 + 1)) + 0; var x = Math.floor(y); return x; }
function rightRandomNum() { var r = Math.random(); var y = (r * (cWidth - 0 + 1)) + 0; var x = Math.floor(y); return x; }

这是第二种解决方案的 fiddle：https://jsfiddle.net/uL24u0e4/

限制元素出现在屏幕之外

Limiting an element from appearing out of the screen

javascript

random

responsive-design

limit

absolute