博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单说 JavaScript实现雪花飘落效果
阅读量:6470 次
发布时间:2019-06-23

本文共 1345 字,大约阅读时间需要 4 分钟。

说明

这次实现的雪花飘落的效果很简单,主要是为了练习练习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代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。

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

如果想了解更详细的东西推荐看看下面的文章

总结

这次实现的雪花飘落效果,要说麻烦的地方,就是第二个定时器那里了,为什么用了这个定时器就能让雪花动起来,文中只是简单的说了一下,更加详细的还是看看推荐的那几篇文章吧!不过在这之前,要先弄明白定时器是怎么回事才可以。

不明白定时器看
不明白为什么用第二个定时器看这几篇文章

JQuery版

    

前端简单说

转载地址:http://ywjko.baihongyu.com/

你可能感兴趣的文章
dnsmasq安装使用和体验
查看>>
学习constructor和instanceof的区别
查看>>
Vijos P1881 闪烁的星星
查看>>
ABP理论学习之领域服务
查看>>
Qt 控制watchdog app hacking
查看>>
让所有IE支持HTML5的解决方案
查看>>
RDD之五:Key-Value型Transformation算子
查看>>
Windows 搭建Hadoop 2.7.3开发环境
查看>>
python操作mysql数据库实现增删改查
查看>>
percona 5.7.11root初始密码设置
查看>>
Cognitive Security的异常检测技术
查看>>
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
查看>>
生活杂事--度过十一中秋
查看>>
Pyrex也许是一个好东西
查看>>
Java内部类总结
查看>>
NeHe OpenGL第二课:多边形
查看>>
WINFORM WPF字体颜色相互转换
查看>>
能力不是仅靠原始积累(三)
查看>>
实战:使用终端服务网关访问终端服务
查看>>
彻底学会使用epoll(一)——ET模式实现分析
查看>>