python实现雪花飘落的效果_简单说 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实现的代码,思路都一样。
body{background-color:#000;
/*防止出现向下滚动条*/overflow:hidden;
}
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();
注意:
因为定时器添加的事件,会在下一次Event Loop执行,所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后,再修改他的样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。
简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。
如果想了解更详细的东西推荐看看下面的文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞,哪些地方会出现js阻塞?
浏览器~加载,解析,渲染
总结
这次实现的雪花飘落效果,要说麻烦的地方,就是第二个定时器那里了,为什么用了这个定时器就能让雪花动起来,文中只是简单的说了一下,更加详细的还是看看推荐的那几篇文章吧!不过在这之前,要先弄明白定时器是怎么回事才可以。
不明白定时器看这里,定时器
不明白为什么用第二个定时器看这几篇文章
js setTimeOut()
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
哪些地方会出现css阻塞,哪些地方会出现js阻塞?
浏览器~加载,解析,渲染
JQuery版
body{background-color:#000;
/*防止出现向下滚动条*/overflow:hidden;
}
function snow(){//1、定义一片雪花模板
var flake = $("
"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();
python实现雪花飘落的效果_简单说 JavaScript实现雪花飘落效果相关推荐
- 用python画雪花飘落_简单说 JavaScript实现雪花飘落效果
function snow() { // 1.定义一片雪花模板 var flake = document.createElement('div'); // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺ flake ...
- 用python画简单雪花剪纸步骤图解_简单雪花剪纸步骤图解
简单雪花剪纸步骤图解 民间剪纸的表现语言不是简单的平铺直叙,而是托物寄语,借用那些约定成俗的观念化形象,来寄托人们对美好生活的向往,对吉祥幸福的期盼.下面是小编为大家整理的.简单雪花剪纸步骤图案,希望 ...
- orton效果_如何使图片发光:Orton效果
orton效果 Have you ever seen an impossibly dream-like landscape photo? One with a slow burning, glowin ...
- python装饰器的通俗理解_简单理解Python装饰器
Python有大量强大又贴心的特性,如果要列个最受欢迎排行榜,那么装饰器绝对会在其中. 刚接触装饰器,会觉得代码不多却难以理解.其实装饰器的语法本身挺简单的,复杂是因为同时混杂了其它的概念.下面我们一 ...
- java 实现loading效果_简单实现JS Loading功能
我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示.其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下. 1 ...
- python写整数逆位运算_简单了解python的一些位运算技巧
前言 位运算的性能大家想必是清楚的,效率绝对高.相信爱好源码的同学,在学习阅读源码的过程中会发现不少源码使用了位运算.但是为啥在实际编程过程中应用少呢?想必最大的原因,是较为难懂.不过,在面试的过程中 ...
- python函数后面两个括号_简单了解为什么python函数后有多个括号
这篇文章主要介绍了简单了解为什么python函数后有多个括号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一般而言,函数后面只有一个括号.如果看见 ...
- vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果
vue实现波纹效果 Vue-Rippler (vue-rippler) Simple Vue.js plugin for custom ripple effect. 简单的Vue.js插件可实现自定义 ...
- java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
- python 编译成exe vmp加密_简单分析VMProtect V3.3.1
本帖最后由 Crazyman_Army 于 2019-2-15 15:05 编辑 前言 VMProtect3很早就出来了,据说代码使用C++重构了,而且虚拟机架构也有很大的变化.网上关于VMP3.X的 ...
最新文章
- 可疑文件_【国家标准】印刷文件鉴定技术规范点阵式打印文件的同机鉴定
- php lyadmin,index.php
- HBase 1.1.2 优化插入 Region预分配
- Android之推荐看的Android源码
- 打开eclipse出现Failed to load the JNI shared library “D:\java\jdk\bin\...\jre\bin\server\jvm.dll”如何解决?
- 关于Promise详解
- Duilib--->Duilib库介绍总结概述
- 微信公众号 Hash模式授权
- 如何快速给图片加水印?
- ECPC16-E. Jumping(bfs)
- Failed to send a request to Slack API server: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certif
- obs多推流地址_腾讯推流直播教程OBS下载、安装、使用
- 第16届全国大学生智能汽车竞赛——百度智慧交通赛项技术方案公开
- 新版Logcat使用指南
- Linux系统的时区时间设置
- JDOM解析xml文件
- css渐变斑马条纹_创建斑马条纹表
- Java数组之一维数值数组之成绩统计
- 以阿里为例,详解SRE的团队建设与职能分工
- 5分钟爬虫教程:如何用 Python 爬一些微电影?