下雪了-js下雪效果

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>

效果图：
下雪了-js下雪效果-LMLPHP

转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。