JS小练习-雪花飘落
1 概述
为了练习一下定时器setInterval的使用，并且为以后做其他项目做准备。这里做了一个简单的雪花飘落的效果。希望我的审美观能得到大家的喜欢。
2 效果图如下
3 主要功能
为了不时之需
增加网页的美观程度
为一些刚接触JS的同学提供帮助
4实现方式
首先，我们需要一个容器来容纳这些雪花，我这里用的是整个body，代码如下：
这里的相对定位是为了后面的雪花定位。
接下来，我们开始创建雪花。这里给一个定时器，让雪花源源不断的创建出来，模拟漫天飞雪的场景。我们的雪花是一张图片，大家可以网上随意找，最好是背景透明的雪花。
创建一个img对象赋值给img，img的地址就是我们找的雪花照片。
这里给我们创建的雪花对象宽度，这里我随机给的数值0--35px，保证雪花有大有小，将雪花宽度赋值给其高度，保证雪花是个正方形。
这里是给雪花一开始的透明度，也是随机值，让雪花产生的种类多样。
并且我还给予了雪花的一开始旋转角度，这样看起来更美观，更真实些。
最后我们给雪花定位，使用绝对定位，top值我们给定值，让雪花在屏幕的上方隐藏，left值我们给随机值，让每产生一个雪花，它的位置都不同。
这个定时器就写完了，附上完整的创建雪花定时器代码：
setInterval(function(){
img=document.createElement("img");
img.src="snow.png";
img.style.position="absolute";
img.style.top="-50px";
img.style.left=(Math.random()*1300)+"px";
img.style.width=Math.random()*35+"px";
img.style.height=img.style.width;
img.style.opacity=Math.random();
var deg=(Math.random()*360)+"deg";
img.style.transform="rotate("+deg+")";
document.body.appendChild(img);
start(img);
},200);
定时器延时200ms，每隔200ms即产生一个雪花，大家可以根据自己需要自行调节时间。末尾的document.body.appendChild(img);是将产生的雪花加进body中。start(img)是我们调用的让雪花飘落的函数，接下来我们会进行介绍。
接下来我们介绍一下，源源不断产生的雪花怎样飘落下来。我这里新建了一个start函数。在start函数中我又设置了一个定时器s。
在定时器S中我们要不断地对雪花的top值进行改变，让每个雪花的每次下降距离为1px，parseInt是为了将初始的top值转换为整数。
雪花的left值，我也给了一个随机数，每次加一个很小的随机数，使得雪花下降的不是垂直下降，是倾斜的徐徐下降，使得雪花下降的更加真实。
雪花的透明度我让其慢慢的减小，效果是让雪花慢慢的融化掉，显得更美丽，因为一开始给予的雪花透明度是随机的，所以一些雪花一开始透明度低，降落到一半可能就消失了。
这里给了个判断条件，如果雪花飘出给定的容器，就删除飘出的img这个元素，并清空定时器。不然，页面中的雪花越积越多，时间长了浏览器会卡。
下面附上start函数完整代码：
function start(e){
var s= setInterval(function(){
e.style.top=(parseInt(e.style.top)+1)+"px";
e.style.left=(parseFloat(e.style.left)+Math.random()*0.4)+"px";
e.style.opacity= e.style.opacity-0.0009;
if(parseInt(e.style.top)>document.documentElement.clientHeight-50||parseInt(e.style.left)>document.documentElement.clientWidth-50){
document.body.removeChild(e);
clearInterval(s);
}
},15);
}
到目前为止，我们的雪花飘落效果已经基本完成了，如果大家有什么问题请尽管提出，有好的建议我也乐意与大家交流，我会不断改进优化代码。谢谢。
5 雪花飘落效果完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload=function(){
var img;
setInterval(function(){
img=document.createElement("img");
img.src="snow.png";
img.style.position="absolute";
img.style.top="-50px";
img.style.left=(Math.random()*1300)+"px";
img.style.width=Math.random()*35+"px";
img.style.height=img.style.width;
img.style.opacity=Math.random();
var deg=(Math.random()*360)+"deg";
img.style.transform="rotate("+deg+")";
document.body.appendChild(img);
start(img);
},200);
function start(e){
var s= setInterval(function(){
e.style.top=(parseInt(e.style.top)+1)+"px";
e.style.left=(parseFloat(e.style.left)+Math.random()*0.4)+"px";
e.style.opacity= e.style.opacity-0.0009;
if(parseInt(e.style.top)>document.documentElement.clientHeight-50||parseInt(e.style.left)>document.documentElement.clientWidth-50){
document.body.removeChild(e);
clearInterval(s);
}
},15);
}
}
</script>
</head>
<body style="background-color:black;width: 100%;height: 100%;position: relative" >
</body>
</html>