使用Javascript我粗略地模拟布朗运动的粒子，但由于某种原因，我不明白我的粒子向左和向左漂移。
该算法非常简单。每个粒子都是div，我只需在每轮div的{{1}}和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 ";
});
});
和min（max），所有粒子都会快速向上和向左漂移。
Example of drift even with the removal of .min() and .abs().
要抵消这种情况，我必须使用-5, 5 min和max。
以下是-1, 5所有粒子的CSS包含在：
div以下是每个粒子的默认CSS：
#box {
width:500px;
height:500px;
border:2px #000 solid;
position: relative; }
发生了什么事？为什么div.spec {
width:5px;
height:5px;
background-color:#00DDAA;
position:absolute; }
和-5的最小值和最大值会导致向上和向左漂移？
随机函数5的测试似乎没有表现出如此持续的负漂移。
ran()功能取自 the MDC Math.random() page 。
答案 0 :(得分：8)
你的错误是使用
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)
否则你实际上给了“body”id为“box”
编辑：
附加div的最有效方法如下（this post所示）：
$(document.createElement('div')).appendTo('body').attr('id', 'box')
答案 1 :(得分：2)