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




如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=49

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。