限制元素出现在屏幕之外答案

【问题标题】：Limiting an element from appearing out of the screen限制元素出现在屏幕之外
【发布时间】：2015-06-25 22:39:56
【问题描述】：

我试图让一个正方形出现在屏幕的随机位置。我已将它的位置属性设置为绝对值，并且在 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/

【问题讨论】：

标签： javascript random responsive-design limit absolute

【解决方案1】：

您可以在对象上调用getBoundingClientRect 方法（MDN reference）并检查其bottom 属性是否大于window.innerHeight（意味着它落在窗口高度之外），或者它的@987654326 @属性大于window.innerWidth（表示超出窗口宽度），如果是，再次调用reappear函数：

    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/

【讨论】：

【解决方案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/

【讨论】：