简单说 JavaScript实现雪花飘落效果

ShowerSun 发布于2019-08-21 17:51 / 2416人阅读

摘要：说明这次实现的雪花飘落的效果很简单，主要是为了练习练习中的定时器，和。简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。

说明

这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。

效果图

解释

setTimeout()
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay)

上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

clearTimeout()，clearInterval()
setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

注意：

setTimeout 和 setInterval 必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。

这里就不细说 setTimeout 和 setInterval的概念了，
想详细了解的请看这里，定时器

我们继续说实现雪花飘落的效果
主要是以下4步：
1、定义一片雪花模板；
2、设置第一个定时器，周期性定时器，每隔一段时间生成一片雪花；
3、设置第二个定时器，一次性定时器，当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
4、设置第三个定时器，当雪花落下后，删除雪花。

上面是实现的思路，下面写出具体的代码，下面的代码是JS原生代码，最后会附上JQuery实现的代码，思路都一样。

注意：
因为定时器添加的事件，会在下一次Event Loop执行，所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后，再修改他的样式，这样才能让他动起来，如果没有这个定时器，浏览器会把所有的JS代码都执行完之后才渲染页面，这样的话后面的样式就直接覆盖前面的样式了，雪花就没法动了，这和浏览器的线程有关系。

简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。

如果想了解更详细的东西推荐看看下面的文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞，哪些地方会出现js阻塞？
浏览器~加载，解析，渲染

总结

这次实现的雪花飘落效果，要说麻烦的地方，就是第二个定时器那里了，为什么用了这个定时器就能让雪花动起来，文中只是简单的说了一下，更加详细的还是看看推荐的那几篇文章吧！不过在这之前，要先弄明白定时器是怎么回事才可以。
不明白定时器看这里，定时器
不明白为什么用第二个定时器看这几篇文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞，哪些地方会出现js阻塞？
浏览器~加载，解析，渲染

JQuery版

云服务器 GPU云服务器 jquery飘落效果这种效果怎么实现简单javascript 实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90103.html

简单说 JavaScript实现雪花飘落效果

摘要：说明这次实现的雪花飘落的效果很简单，主要是为了练习练习中的定时器，和。简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 showImg(https://seg...

yedf 2019-08-29 13:54 评论0 收藏0
开源造轮子：一个简洁，高效，轻量级，酷炫的不要不要的canvas粒子运动插件库

摘要：一开篇哈哈哈，感谢标题党的莅临虽然标题有点夸张的感觉，但实际上，插件库确实是简洁，高效，轻量级，酷炫酷炫的咯。当然，配置不同的参数值，或许可以得到挺多不同的特效呢上面已经演示过标配的粒子无序运动啦，下面演示后面两种。一：开篇哈哈哈，感谢标题党的莅临~ 虽然标题有点夸张的感觉，但实际上，插件库确实是简洁，高效，轻量级，酷炫酷炫的咯。废话不多说，先来看个标配例子吧： http://co...

Anonymous1 2019-08-20 11:38 评论0 收藏0
JavaScript实现爆炸碎片的图片切换效果

摘要：总的来说就是两步生成小的元素，整齐的覆盖在大的元素上，像下图这样为了方便看，把每个小元素，分开了些。鼠标移入时，让所有小元素动起来，主要是改变小元素的属性的值具体实现的代码也并不多，下面是注释很详细的代码。说明和大家分享一个看上去很酷的效果，先来看效果图吧！ showImg(https://segmentfault.com/img/remote/1460000016194106);...

xialong 2019-08-22 17:12 评论0 收藏0
用canvas实现简单的下雪效果

摘要：并且通过函数营造出雪花左右飘动的效果，当雪花落到窗口外面后将雪花重新移动到窗口上方再次下落，实现如下速度和密度实际上不是平方的关系，这么些是为了效果更加错落有致完成，我们来看一下实际效果也可以去看看嗯，还挺像那么回事儿首先新建一个html文件，将body的背景设置为天空的那种深蓝色，并创建一个canvas，canvas的操作逻辑都放在snow.js中： body {...

U2FsdGVkX1x 2019-08-02 12:02 评论0 收藏0