js 雪花
Posted li923
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于js 雪花的主要内容，如果未能解决你的问题，请参考以下文章