如何生成符合屏幕范围条件的JavaScript随机变量x？

核心数学逻辑（直白版） #

你需要的x得落在 radius 和 innerWidth - radius 之间，我们可以拆成两步计算：

• 第一步：先算出这个合法区间的长度：innerWidth - 2 * radius（从radius到innerWidth-radius的距离，就是右边数值减左边数值）
• 第二步：用Math.random()生成0到1之间的随机数，乘以这个区间长度，得到0到区间长度的随机数，最后加上radius，就能把随机数平移到你需要的区间里。

修正后的代码 #

var radius = 20;
var x = Math.random() * (innerWidth - 2 * radius) + radius;

原代码的问题 #

原来的Math.random() * innerWidth会生成0到innerWidth之间的随机数，可能出现x小于20或者x大于innerWidth-20的情况，这就导致元素部分超出屏幕，出现你看到的异常显示。

内容的提问来源于stack exchange，提问作者Yaw Kean Huat