JS生成指定范围内的随机数，可做DIV等元素的随机分布

最近，用4px*4px的DIV块元素做了一个自己的点阵像素头像，

想做成动画效果：希望DIV块从随机分布状态，动态的聚合成头像。赞一个！

http://qoogle.cn/?id=7　这里看实例。

其原理很简单：

1、先做搬运工，控制好众多的DIV绘好点阵头像，(我是用a元素block成的块)

2、用js的for循环分配给每个DIV块一个nth-child(n)选择器定位，方便单独控制(几千个DIV块，你不可能一个一个去标ID、CLASS以及加css样式的！！)。

3、用指定范围内的随机数，做成随机的left、top偏移量。——这里指定范围的随机数使DIV的随机分布变的有范围可控！

4、用animation动画使DIV归位，就算基本完成了。

动画效果要再做的好一点的话：

5、就筛选出一小部分nth-child(n)，做成随机延时3－5秒！ （效果很棒！赞一个！）

6、用 if 筛选出分布在头像位置的DIV点阵，让left或top偏移它，或一开始就做好禁用这块区域的随机分布。 （效果很棒！再赞一个！）

这些是题外话，这个DEMO用到了好几个指定范围的随机数生成方式。

指定范围内的随机数怎么做呢？

转载如下： ^_^

定义和用法

random() 方法可返回介于 0 ~ 1 之间的一个随机数。

语法

Math.random()

返回值

0.0 ~ 1.0 之间的一个伪随机数。

实例

在本例中，我们将取得介于 0 到 1 之间的一个随机数：

 代码如下   复制代码

<script type="text/javascript">

document.write(Math.random());

</script>

// 输出：

0.15246391076246546

如何生成指定范围值的随机数

利用 parseInt()、Math.floor() 或者 Math.ceil()进行四舍五入处理

我们看到，直接使用Math.random()方法，生成的是一个小于1的数，所以：

代码如下

Math.random()*5

得到的结果是一个小于5的随机数。而我们通常希望得到的是0-5之间的整数，所以我们需要对得到的结果四舍五入处理一下，从而得到我们期望的整数。parseInt()、Math.floor()和Math.ceil()都可以起到四舍五入的作用。

代码如下

var randomNum = Math.random()*5;

alert(randomNum); // 2.9045290905811183 

alert(parseInt(randomNum,10)); // 2

alert(Math.floor(randomNum)); // 2

alert(Math.ceil(randomNum)); // 3

由测试的代码我们可以看到，parseInt()和Math.floor()的效果是一样的，都是向下取整数部分。所以parseInt(Math.random()*5,10)和Math.floor(Math.random()*5)都是生成的0-4之间的随机数，Math.ceil(Math.random()*5)则是生成的1-5之间的随机数。

生成指定范围数值随机数

所以，如果你希望生成1到任意值的随机数，公式就是这样的：

代码如下

// max - 期望的最大值

parseInt(Math.random()*max,10)+1;

Math.floor(Math.random()*max)+1;

Math.ceil(Math.random()*max);

如果你希望生成0到任意值的随机数，公式就是这样的：

代码如下

// max - 期望的最大值

parseInt(Math.random()*(max+1),10);

Math.floor(Math.random()*(max+1));

如果你希望生成任意值到任意值的随机数，公式就是这样的：

// max - 期望的最大值

// min - 期望的最小值 

parseInt(Math.random()*(max-min+1)+min,10);

Math.floor(Math.random()*(max-min+1)+min);

-----------------

其实，记住最后的标红公式就差不多了，留出一些大脑记忆空间去回亿美好的青春吧！ ^_^ 

实例：

把开本博客导航的“qoogle是谁”有实例　——　小方块飘移聚焦成我的头你。

或　直的打开网址定位：http://qoogle.cn/?id=7