Question

好的，所以我有这个代码，每隔2秒钟，身体中div的数量会增加一倍。但是我希望这些div在视口内部的随机位置我怎么能得到那个？只有我的代码中的第一个div实际上出现在一个随机位置，每次其余的只是堆叠并离开视口这里是jsfiddle：

<!doctype html>
<html>
<head>
<title>jQuery Project: An exploding game</title>
<meta charset="utf-8">
<style>
body, html {
width: 960;
height: 500%;
}
div.box {
position: relative;
width: 100px;
height: 100px;
background-color: orange;
}
div.exploding {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script>
$(document).ready(function(){
$("body").append("<div class='box'></div>");
    // add new div *2
    $("div.box").each(function() {
             var numRand = Math.floor(Math.random()*501);
            $(this).css({'margin-left': numRand});
                setInterval(function()                {$(".box").clone().appendTo("body");}, 3000);

})  

    });





</script>
</head>
<body>
</body>
</html>

Answer 1

以下链接引导我回答这个问题：random position of divs in javascript

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

其次，如果你想将div放在视口内，在出现的div上使用position：absolute比position：relative（在这种情况下）更好，因为如果你使用position相对身体的高度可能会增加每个添加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();
        });
    }

以下是它的工作演示：http://jsfiddle.net/hy4fq/3/

Answer 2

你需要继续重新定义numbRand，它只被定义一次然后用于每个div。也许创建另一个函数并返回numbRand，然后每次调用它，每次都会拉一个随机数。

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

2 个答案: