Question

因此，我有以下位置的元素：absolute，然后使用Math.random（）设置其left：#random和top：#random位置。

然而，一件非常奇怪的事情正在发生。它应该是完全随机的，因此应该完全随机地放置它们。但是，它们一次又一次地紧密地放置在一起。而不是分散开来。

无论您如何清楚地看到，它们的位置确实是随机的：

这是我用来生成它们的代码：

const Clouds = function(props) {
    const clouds = []
    for (let i = 0; i < props.cloudNum; i++) {
        const style = {
            position: 'absolute',
            height: 50 * props.cloudSize + 'px',
            top: Math.random() * 100 + '%',
            left: Math.random() * 100 + '%',
        }
        clouds.push(<Cloud key={i} style={style} />)
    }
    return <div className={props.side}>{clouds}</div>
}

Math.random是否存在时间分量，并且由于它们是按顺序生成的，因此它们的随机数相似吗？

Answer 1

实际上，尽管它们看起来像相似的数字，却不是（请记住您要乘以100），这意味着您的随机数空间从0到100（因为图形中的小数几乎没有值，因为您就是这种情况）。

请记住，如果您的空间是100个云，只生成13个云，那么在生日问题上，两个云占据同一位置的可能性就超过50％。

https://en.wikipedia.org/wiki/Birthday_problem

Answer 2

没有时间成分-它只是由系统生成的。 Here's很好的解释它。随机算法取决于JavaScript引擎（该线程中有一个V8答案），但该函数始终会产生一个介于0和1之间（含0和1）的浮点数。您的代码产生了两个关闭的数字，这是一个非常大的巧合。

Answer 3

您获得相似的价值是一个巧合。尝试使用我的代码段尝试多次，以自己进行测试。

请注意，我的对象比您的对象小得多，没有元素重叠可以更好地体现随机性。恕我直言，如果您要生成云（取决于目的），最好使用perlin noise

const container = document.getElementById('container');

const Clouds = function() {
   
    for (let i = 0; i <10; i++) {        
         let myCloud = document.createElement("div");
        myCloud.style.height = '15px';
                myCloud.style.width = '15px';
        myCloud.style.position = 'absolute';
        myCloud.style.background =  '#fff';
        myCloud.style.border = '1px solid #ccc';
        myCloud.style.left = Math.random()*100+'%';
        myCloud.style.top = Math.random()*100+'%';
        container.appendChild(myCloud);
    }
   
}

function generate() {
 container.innerHTML = '';
 Clouds();
}

#container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: red;
}

button {
position: absolute;
z-index: 999;
}

<div id="container"></div>
<button onClick="generate()">Generate</button>

JavaScript Math.random（）返回非常相似的值

3 个答案: