为什么我的粒子漂移？(又称Math.random()是破碎的还是我的算法？)

Question

使用Javascript我粗略地模拟布朗运动的粒子,但由于某种原因我不明白我的粒子向左和向左漂移.

该算法非常简单.每个粒子是一个div和我简单地增加或减少从每个随机数div的top和left每一轮的位置.

我Math.random()稍微阅读了一下,我试图使用一个函数来返回一个随机数min来max包含:

// Returns a random integer between min and max  
// Using Math.round() will give you a non-uniform distribution!  
function ran(min, max)  
{  
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

这是粒子运动的功能:

var x, y, $elie, pos, nowX, nowY, i, $that;    

function moveIt()
{
    $("div.spec").each(function(i, v) {
        x = ran(-5, 5);
        y = ran(-5, 5);
        $elie = $(v);
        pos = $elie.position();
        nowX = pos.left;
        nowY = pos.top;

          // The min and abs are to keep the particles within a box
          // The drift occurs even if I remove min and abs
        $elie.css("left", Math.min(Math.abs(nowX + x), 515));
        $elie.css("top",  Math.min(Math.abs(nowY + y), 515)); 
    });
}

这里是粒子最初是如何设置的setInterval.

$(function() {
    $("body").append("<div/>").attr("id","box");
    $elie = $("<div/>").attr("class","spec");
    // Note that math random is inclussive for 0 and exclussive for Max
    for (i = 0; i < 25; ++i)
    {
        $that = $elie.clone();  
        $that.css("top", ran(0, 495));
        $that.css("left", ran(0, 495));            
        $("#box").append($that);            
    }          
    timer = setInterval(moveIt, 60);
    $("input").toggle(function() {
        clearInterval(timer);
        this.value = " Start ";
    }, function() {
        timer = setInterval(moveIt, 60);        
        this.value = " Stop ";            
    });        
});

我的问题是使用from min和maxfrom(-5, 5),所有的粒子都快速向上和向左漂移.

jsFiddle漂移的例子(-5,5)

移除的例子即使移除.min()和.abs().

为了解决这个问题,我不得不使用min和max的-1, 5.

jsFiddle没有漂移的例子(-1,5)

以下是div所有粒子的CSS 包含在:

#box {
    width:500px;
    height:500px;
    border:2px #000 solid;
    position: relative; }

这是每个粒子的默认CSS:

div.spec {
    width:5px;
    height:5px;
    background-color:#00DDAA;
    position:absolute; }

到底是怎么回事？为什么的最小值和最大值-5,并5导致向上和向左漂移？

对随机函数的测试ran()似乎没有表现出这种持续的负漂移.

jsFiddle示例测试ran()

---

该ran()函数取自MDC Math.random()页面.

Answer 1

你的错误是使用

pos = $elie.position();

而不是

pos = $elie.offset();

如果将它们添加到父div中,这不会产生任何影响,但是您的元素未正确添加到父div,它们会直接附加到文档正文.所以你的另一个错误就是:

$("body").append("<div/>").attr("id","box");

如果你想让div的id为'box',那么该行应为:

$box = $("<div/>").attr("id","box");
$("body").append($box)

否则你实际上给"身体"的"盒子"的ID

编辑:

最有效的方法追加的股利将是以下(由注意到这个帖子):

$(document.createElement('div')).appendTo('body').attr('id', 'box')