如何用js生成随机散落雪花

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在学习JavaScript的过程中，学习到了如何随机生成一个div模型，并且进一步学会在其中嵌入一个雪花图案，在生成雪花图案的基础上可以将雪花通过函数来进行移动，实现雪花的随机生成和飘落，下面来进行详细的描述来解析如何实现雪花的随机生成和飘落，来实现模拟雪花。

要实现雪花的飘落和生成就需要，分为两个部分。一 是需要生成随机雪花，通过createElement来生成元素，并为元素进行赋予随机生成的函数，即random使得雪花生成位置是随机的，且要求范围较大，能为元素的随机范围较大使得生成的随机项目元素较为分散，雪花生成分散

还需要使得元素能够移动，需要通过offsetTop来使得元素定义一个函数向下移动，使得元素雪花统一向下移动，模拟雪花飘落的动态模型。

解决方案

首先需要生成一个雪花产生的函数，来实现雪花的随机生成代码如下：

其中，通过HTML的按钮来生成雪花链接函数，需要注意的是建议将random的乘数范围写大，生成的雪花在较少的情况下会减少重复的概率，形成较好的画面。其中效果如下：

第二步需要就是为生成的雪花动起来，需要使用offsetTop这一重要的代码，使得代码指定缓慢移动指定距离，使得雪花向下移动，代码如下：

可以通过代替置换元素来检测是否指定到与元素的链接是否成功，效果具体如下：

结语

不断检测模块之间的链接是非常重要的，需要注意每个元素和模块的衔接，很多的失误就是因为目标和指定模块的衔接，这个需要尤为注意，可以通过较为简单的测试来检测id和数组的定义错误，本次制作很多失误就是因为模块衔接而出现的。

更多精彩文章：

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！