原生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>

效果圖如下:

這樣雪花飄落的效果就做好了。有什么不足的地方請指正！