Jquery 将div添加到窗口内的随机位置

好的，我有一段代码，每2秒，主体中的div数量就会增加一倍。但是，我希望这个div位于视口内部的一个随机位置，我如何才能做到这一点？每次我的代码中只有第一个div实际出现在一个随机位置，其余div只是叠加并离开视口，这里是jsfiddle：

jQuery项目：一个爆炸性的游戏
正文，html{
宽度：960；
身高：500%；
}
分区箱{
位置：相对位置；
宽度：100px；
高度：100px；
背景颜色：橙色；
}
爆炸{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：红色；
}
$（文档）.ready（函数（）{
$（“正文”）。追加（“”）；
//添加新的div*2
$（“div.box”）。每个（函数（）{
var numRand=Math.floor（Math.random（）*501）；
$（this.css（{'margin-left'：numRand}）；
setInterval（function（）{$（.box”）.clone（）.appendTo（“body”）；}，3000）；
})  
});

您需要不断重新定义numbRand，它只定义一次，然后用于每个div。也许可以创建另一个函数并返回numbRand，然后每次调用它，这样它每次都会提取一个随机数。

以下链接让我找到了这个答案：

首先，您需要在每次调用函数时更新随机值。在您的示例中，它位于each函数中，如果您查看开发人员工具，您将看到它仅在第一次设置该值

其次，如果希望将div放置在视口中，则在出现的div上使用position:absolute比position:relative（在本例中）更好，因为如果使用position-relative，则每次添加div时，主体的高度都会增加

function makeDiv() {
        var numRand = Math.floor(Math.random() * 501);
        var divsize = 100;
        var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
        var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
        $newdiv = $("<div class='exploding'></div>").css({
            'left': posx + 'px',
                'top': posy + 'px'
        });
        $newdiv.appendTo('body').delay(2000).fadeIn(100, function () {
            //$(this).remove();
            makeDiv();
        });
    }

函数makeDiv（）{
var numRand=Math.floor（Math.random（）*501）；
var-divsize=100；
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$newdiv=$（“”）.css({
“左”：posx+“px”，
“顶部”：posy+“px”
});
$newdiv.appendTo（'body'）。delay（2000）。fadeIn（100，函数（）{
//$（this.remove（）；
makeDiv（）；
});
}

---

这里有一个它工作的演示：

Thnak你现在唯一的问题是它一次只添加一个div，而不是页面上div的两倍，但是我确信我可以让它与你的代码一起工作，我感谢你的帮助！没问题。祝你好运

function makeDiv() {
        var numRand = Math.floor(Math.random() * 501);
        var divsize = 100;
        var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
        var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
        $newdiv = $("<div class='exploding'></div>").css({
            'left': posx + 'px',
                'top': posy + 'px'
        });
        $newdiv.appendTo('body').delay(2000).fadeIn(100, function () {
            //$(this).remove();
            makeDiv();
        });
    }