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（意味着它落在窗外高度），或者如果right属性大于window.innerWidth（意味着它超出窗口宽度），如果是，则再次调用重新出现函数：

    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);
    }

小提琴更新：https://jsfiddle.net/y3m4ygow/2/

Answer 2

正如您所看到的，这里发生的事情有时会丢失文档，因为（width或height + randomized percentage）超出文档宽度或高度

例如，假设文档宽度为1000px，随机数为90% (=900px)，因为框宽为200px，因此您将100px离开屏幕。

现在您有两种解决方案：

第一个：正如@Sidd所说，您可以使用getBoundingClientRect检查该框是否进入或退出这将返回一个变量，因为您有两个属性，一个是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; }

这是第二个解决方案的小提琴：https://jsfiddle.net/uL24u0e4/

限制元素出现在屏幕外

2 个答案: