标签：ack move gray 说明 随机数 方式 rip get ali
<!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 雪花
原文地址：https://www.cnblogs.com/li923/p/11550860.html
