Jingle Bells,Jingle Bells,圣诞来临，做了一个下雪的小程序玩。有大雪花和小雪花。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body { overflow:hidden; background:#0099FF; } .smallSnowflake,.largeSnowflake { font-size:38px; color:white; position:absolute; } .largeSnowflake{ font-size:48px; } </style> <script type="text/javascript"> window.onload=function(){ var snow=new Snow(); snow.start(); }; function Snow(){ this.sky=document.body; this.width=document.documentElement.clientWidth;
this.height=document.documentElement.clientHeight; } Snow.prototype={ start:function(){ var _this=this; _this.createSmallSnowflake(); _this.createLargeSnowflake(); }, createSmallSnowflake:function(){ var _this=this; setInterval(function(){ var smallSnow=document.createElement('p'); smallSnow.innerHTML='*'; smallSnow.className='smallSnowflake'; smallSnow.style.left=Math.round(Math.random()*_this.width)+'px'; _this.sky.appendChild(smallSnow); _this.slide(smallSnow); },1000); }, createLargeSnowflake:function(){ var _this=this; setInterval(function(){ var largeSnow=document.createElement('p'); largeSnow.innerHTML='*'; largeSnow.className='largeSnowflake'; largeSnow.style.left=Math.round(Math.random()*_this.width)+'px'; _this.sky.appendChild(largeSnow); _this.slide(largeSnow); },2000); }, slide:function(ele){
var _this=this; var timer=setInterval(function(){ var t=ele.offsetTop; ele.style.top=t+5+'px';
if(ele.offsetTop+ele.style.height>_this.height)
{
_this.sky.removeChild(ele);
clearInterval(timer);
}
},1000); } }; </script> </head> <body> </body> </html>
效果图：
转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。