原生js实现雪花飘落效果

雪花飘落的效果实现步骤：1.使用setInterval定时器每800毫秒创建一个雪花；2.把每一个雪花作为参数传进动态下落的方法中即可。

<style>

    *{padding: 0;margin: 0;}

    body{

        background:#000;

        width: 100%;

        height: 100%;

        overflow:hidden;

    }

</style>

<div id="flame"></div>

js实现代码:

<script>

    function Obj(){}  //创建一个对象

    /*为这个对象添加一个具有一个参数的原型方法*/

    Obj.prototype.draw=function(o){

        var speed=0;   //雪花每次下落的数值（10px）

        var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//设置雪花随机的开始x值的大小

        o.style.opacity=(Math.ceil(Math.random()*3)+7)/10;  //设置透明度

        o.style.left=startPosLeft+'px';

        o.style.color="#fff";

        o.style.fontSize=12+Math.ceil(Math.random()*14)+'px';

        setInterval(function(){

            //雪花下落的top值小鱼屏幕的可视区域高时执行下列

            if(speed<document.documentElement.clientHeight){

                o.style.top=speed+'px';

                o.style.left=startPosLeft+Math.ceil(Math.random()*8)+'px';

                speed+=10;

            }

            else{

                o.style.display='none';

            }

        },400);

    }

    var flame=document.getElementById('flame');

    /*使用setInterval定时器每800毫秒创建一个雪花*/

    setInterval(function(){

        var odiv=document.createElement('div');  //创建div

        odiv.innerHTML="✽";   //div的内容

        odiv.style.position='absolute';  //div的绝对定位

        flame.appendChild(odiv);   //把创建好的div放进flame中

        var obj=new Obj();   //创建函数

        obj.draw(odiv);  //执行obj的draw方法

    },800);

</script>

效果图如下:

这样雪花飘落的效果就做好了。有什么不足的地方请指正！