js 雪花
雪花
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪花</title>
<style>
*{
margin:0;
padding:0;
vertical-align:top;
}
.xue{
position:absolute;
color:#fff;
}
.big{
position: relative;
margin: 0 auto;
width: 800px;
top:10px;
}
#bbb{
position:absolute;
top:0px;
left:400px;
width:400px;
border:1px #A9A9A9 solid;
background:#fff;
z-index:9;
height:30px;
line-height: 30px;
}
#xh{
position:absolute;
top:0px;
left:0px;
border:1px #A9A9A9 solid;
background:#fff;
width:400px;
height:30px;
line-height: 30px;
z-index:5;
margin: 0 auto;
}
#box{
height:600px;
position:relative;
border:1px #ccc solid;
background:#000;
overflow:hidden;
top:50px;
margin: 0 auto;
}
#fx{
margin:5px 0 0 5px;
}
#wibutton{
height: 20px;
margin-top: 5px;
margin-left: 60px;
background: darkgray;
border: none;
font-size: 14px;
border-radius: 5px;;
}
</style>
<script>
var i=0,sd;//i作为id属性值的一部分，sd作为定时器函数的标识
var all=0;//all用来存储所有的雪花数目
var other=0;//other用来存储已经落地的雪花数目
var wind=0;//wind用来存储风级
function getStyle(obj,attr){
var ie = !+"\v1";
if(attr=="backgroundPosition"){
if(ie){
return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
}
}
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return document.defaultView.getComputedStyle(obj,null)[attr];
}
}
//创建雪花
function done(){
//创建一个div元素，这个用来放置"雪花"点（.）
var a=document.createElement("div");
a.innerHTML="❄";//雪花
a.id="xue"+i;
a.className="xue";//引用做的属性
//设置元素的top值，随机设置
a.style.top=parseInt(getStyle(box,"height"))*(Math.random()>0.3?Math.random():0)+'px';
var ss=Math.random();//生成随机数
//设置元素的left属性值，随机设置
a.style.left = parseInt(getStyle(box,"width")) * ss + 'px';
box.appendChild(a);
godown(a.id,a.id,8*Math.random());
i++;
all++;//存储所有的雪花数目
var x = 100 * Math.random()* Math.random();//这个值用作定时器函数的执行延迟时间
//递归的方式执行done()方法，也就不断创建雪花
setTimeout(done,x);
};
//使雪花落地消失
function removeElement(aa){
var paa = aa.parentNode;
if(paa){
paa.removeChild(aa);
};
};
//雪花的飘落功能
function godown(a,e,speed){
if(speed < 3){
speed = 3
}
var a1 =document.getElementById(a);
//设置元素的top属性值
a1.style.top = parseInt(getStyle(a1,"top")) + speed +'px';
//top值等于box元素的height值，那么就说明落地了
if(parseInt(getStyle(a1,"top")) < parseInt(getStyle(box,"height"))){
e = setTimeout("godown(\""+a+"\",\""+e+"\","+speed+")",20)
}
else{
clearTimeout(e);
removeElement(a1);
speed=null;
other++;
//落地后就停止定时器函数的执行，并且删除此雪花
//计算剩余的雪花，就是总雪花数减去落地的雪花
document.getElementById('bbb').innerHTML = "区域内还有"+(all-other)+"个雪花点."
};
};
//设置雪花的风级
function fj(wind){
var a = document.getElementById("box").getElementsByTagName('div');
//设置雪花的left属性值，并不断调整此值
for(var index = 0;index<a.length;index++){
a[index].style.left = parseInt(a[index].style.left) + wind +'px';
};
if(Math.abs(wind) > 0.1){
sd = setTimeout("fj("+wind+")",20)
}
else{
clearTimeout(sd);
wind = 0;
};
};
window.onload=function(){
var box=document.getElementById("box");
var obt=document.getElementById("wibutton");
box.style.width='1200px';
obt.onclick=function(){
clearTimeout(sd);
wind=0;
wind=parseInt(document.getElementById("fx").value);
fj(wind);
}
done();
}
</script>
</head>
<body>
<div class="big">
<div id="bbb"></div>
<div id="xh">
<input id="fx" value="6"/>级风
<input id="wibutton" type="button" value="查看效果" />
</div>
</div>
<div id="box"></div>
</body>
</html>
