简单说 JavaScript实现雪花飘落效果
说明
这次实现的雪花飘落的效果很简单，主要是为了练习练习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实现的代码，思路都一样。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #000;
/*防止出现向下滚动条*/
overflow: hidden;
}
</style>
</head> <body>
<script>
function snow() {
// 1、定义一片雪花模板
var flake = document.createElement('div');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerHTML = '❆';
flake.style.cssText = 'position:absolute;color:#fff;'; //获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = window.innerWidth; //定义生成一片雪花的毫秒数
var millisec = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth; //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth; //随机生成雪花大小
var flakeSize = 5 + 20 * Math.random(); //随机生成雪花下落持续时间
var durationTime = 4000 + 7000 * Math.random(); //随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random(); //克隆一个雪花模板
var cloneFlake = flake.cloneNode(true); //第一次修改样式，定义克隆出来的雪花的样式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;
`; //拼接到页面中
document.body.appendChild(cloneFlake); //设置第二个定时器，一次性定时器，
//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
setTimeout(function() {
//第二次修改样式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};
`; //4、设置第三个定时器，当雪花落下后，删除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0); }, millisec);
}
snow();
</script>
</body>
</html>
注意：
因为定时器添加的事件，会在下一次Event Loop执行，所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后，再修改他的样式，这样才能让他动起来，如果没有这个定时器，浏览器会把所有的JS代码都执行完之后才渲染页面，这样的话后面的样式就直接覆盖前面的样式了，雪花就没法动了，这和浏览器的线程有关系。
简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。
如果想了解更详细的东西推荐看看下面的文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞，哪些地方会出现js阻塞？
浏览器~加载，解析，渲染
总结
这次实现的雪花飘落效果，要说麻烦的地方，就是第二个定时器那里了，为什么用了这个定时器就能让雪花动起来，文中只是简单的说了一下，更加详细的还是看看推荐的那几篇文章吧！不过在这之前，要先弄明白定时器是怎么回事才可以。
不明白定时器看这里，定时器
不明白为什么用第二个定时器看这几篇文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞，哪些地方会出现js阻塞？
浏览器~加载，解析，渲染
JQuery版
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #000;
/*防止出现向下滚动条*/
overflow: hidden;
}
</style>
</head> <body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
function snow() {
//1、定义一片雪花模板
var flake = $("<div>").css({
"position": "absolute",
"color": "#fff"
}).html("❄"); //获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = $(document).width(); //获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = $(document).height(); //定义生成一片雪花的毫秒数
var millisec = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() {
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth; //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth; //随机生成雪花大小
var flakeSize = 5 + 20 * Math.random(); //随机生成雪花下落持续时间
var durationTime = 4000 + 7000 * Math.random(); //随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random(); //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
flake.clone().appendTo($("body")).css({
"left": startLeft,
"opacity": startOpacity,
"font-size": flakeSize,
"top": "-25px",
}).animate({ //执行动画
"left": endLeft,
"opacity": endOpacity,
"top": documentHieght
}, durationTime, function() {
//4、当雪花落下后，删除雪花。
$(this).remove();
});
}, millisec);
};
snow();
</script>
</body>
</html>
简单说 JavaScript实现雪花飘落效果的更多相关文章
- js实现雪花飘落效果的代码
使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...
- 【OpenGL】Shader实例分析（七）- 雪花飘落效果
转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如 ...
- 原生js实现雪花飘落效果
雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...
- AJ学IOS（33）UI之Quartz2D雪花飘落效果刷帧
AJ分享,必须精品 效果: 可以加入随机数实现真的飘落效果哦. 代码: -(id)initWithCoder:(NSCoder *)aDecoder { //请注意这里一定要先初始化父类的构造方法 i ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- 手写简单的jq雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
- 使用Photoshop实现雪花飘落的效果
一.准备工作 软件环境:PhotoshopCS5 实验目的:雪花飘落的效果 二.实验步骤 1,打开素材图片并将原图层复制 2,在菜单栏内选择:滤镜->像素化->点状化,单元格大小选6 提 ...
- jQuery.snowflake雪花飘落插件
一.前言 前言:最近圣诞节来临,需要在页面上应用一个雪花飘落的效果,做之前产品经理给了我网络上的一个demo,地址是http://demo.lanrenzhijia.com/demo/1225/sd/ ...
- HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...
随机推荐
- centos 7 安装 LNMPC cacti 1.2.7 监控
先上图,后续更新
- 1.Bacula各组件说明
1. Bacula各组件说明 Baula有三个服务,分别是bacula-sd用于管理storage.bacula-fd为bacula客户端.bacula-dir为bacula的核心组件机direct ...
- 十三，k8s集群web端管理工具dashboard部署
目录 部署 dashboard 由于会被墙, 所以要加一步拉取镜像 正式开始安装dashboard 查看 开放访问 配置dashboard用户 1. token 令牌认证 创建一个 serviceAc ...
- task_struct源码解读
task_struct英文源码原文 以下是中文以及解释:(未完待续,慢慢敲) 1. /* Used in tsk->state: */ #define TASK_RUNNING 0x0000// ...
- Linux系统的grub和BIOS加密
启动流程: BIOS ——> MBR(主引导记录,找到系统在哪个分区) ——> boot loader(grub) ——>kernel(内核)——>进入启动级别init 硬盘的 ...
- AVL树的介绍和实现
一.AVL树 AVL树是一种自平衡二叉查找树,因此在了解AVL树之前先介绍一下平衡二叉树.所谓平衡二叉树即该树中的任一个节点的左子树和右子树高度差不会超过1.如下图左是平衡二叉树,而右图则不是.节点4 ...
- 服务器syns to listen sockets drop导致创建socket失败
在一次测试执行过程中,发现服务器TCP发送队列较长,执行netstat -s | grep LISTEN,发现有SYNs包被丢弃,但是没有times the listen queue of a soc ...
- ValueError: Only call `softmax_cross_entropy_with_logits` with named arguments (labels=..., logits=..., ...)
tf.reduce_mean(tf.nn.softmax_cross_entropy_with_logits(logits=predicton,labels=y))
- Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）
本次演示,项目所需iview,router 首先 在 views 目录 新建 两个 组件 ( login.vue ,index.vue ) login.vue <template> < ...
- django查询优化及ajax编码格式下发送数据 总结
orm查询优化 1)only与refer only方法返回的是一个queryset对象,本质就是列表套数据对象 该对象内只含有only括号所指定的属性(其他属性也可以获取,但是需要重新走数据库 ...