<!Doctype html>
 
    
<html>
 
    
<head>
 
    
    <meta charset="utf-8" />
 
    
    <title></title>
 
    
    <style>
 
    
        * { 
      
 
    
            padding: 0;
 
    
            margin: 0;
 
    
        }
 
    
        
 
    
        html { 
      
 
    
            height: 100%;
 
    
        }
 
    
        
 
    
        body { 
      
 
    
            height: 100%;
 
    
            background: url(img/pic10.jpg) no-repeat;
 
    
            background-size: cover;
 
    
            overflow: hidden;
 
    
        }
 
    
       
 
    
        .snowLand { 
      
 
    
            position: absolute;
 
    
            left: 0;
 
    
            bottom: 0;
 
    
            background: white;
 
    
            width: 100%;
 
    
            height: 0;
 
    
        }
 
    
    </style>
 
    
</head>
 
    

 
    
<body>
 
    
    <div class="snowLand"></div>
 
    
    <script>
 
    
        var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;
 
    
        var screenH = document.documentElement.offsetHeight || document.body.offsetHeight;
 
    
        var oBody = document.getElementsByTagName('body')[0];
 
    
        var oSnowLand = document.getElementsByClassName('snowLand')[0];
 
    
        var snowLandH = 0;
 
    
        var snowNum = 0;
 
    

 
    
        function getRan(min, max) { 
      
 
    
            return Math.floor(Math.random() * (max - min + 1)) + min;
 
    
        }
 
    

 
    
        function Snow(size, l, t, deg, lastTime) { 
      
 
    
            this.size = size;
 
    
            this.l = l;
 
    
            this.t = t;
 
    
            this.deg = deg;
 
    
            this.lastTime = lastTime;
 
    
        }
 
    
        Snow.prototype.createSnow = function () { 
      
 
    
            var _this = this;
 
    
            this.oImg = document.createElement('img');
 
    
            this.oImg.src = "img/snowflake.png";
 
    
            this.oImg.style.cssText = 'width:' + this.size + 'px;height:' + this.size + 'px;position:absolute;left:' + this.l + 'px;top:' + (-this.size) + 'px;transform:rotate(0deg);transition:all ' + this.lastTime + 's ease-in;';
 
    
            oBody.appendChild(this.oImg);
 
    
            setTimeout(function () { 
      
 
    
                _this.snowFall(_this);
 
    
            }, 100);//这里延时若是加的不够，就可能出现cssText还没完全加载进去就执行snowfall，于是可能就不会执行transition事件的监听，就会出现图片一直停留在屏幕中的问题
 
    
        }
 
    
        Snow.prototype.snowFall = function (_this) { 
      
 
    
            _this.oImg.style.top = _this.t + 'px';
 
    
            _this.oImg.style.transform = 'rotate(' + _this.deg + 'deg)';
 
    
            //因为完成transition的属性有两个，所以不加控制的话会执行两次 oBody.removeChild(_this.oDiv);
 
    
            _this.flag = true;
 
    
            _this.oImg.addEventListener('transitionend', function () { 
      
 
    
                if (_this.flag == true) { 
      
 
    
                    oBody.removeChild(_this.oImg);
 
    
                    _this.flag = false;
 
    
                    //每10个雪花，升高10px
 
    
                    //console.log(sonwLandH)
 
    
                    if (snowLandH <= 100) { 
      
 
    
                        snowNum++;
 
    
                        snowLandH = parseInt(snowNum / 10) * 10;
 
    
                        oSnowLand.style.height = snowLandH + 'px';
 
    
                    }
 
    
                }
 
    
            }, false)
 
    
        }
 
    

 
    
        setInterval(function () { 
      
 
    
            for (var i = 0; i < 6; i++) { 
      
 
    
                var nowSize = getRan(10, 30);
 
    
                var snow = new Snow(nowSize, getRan(0, screenW - nowSize), screenH + nowSize, getRan(360, 1440), getRan(3, 6));
 
    
                snow.createSnow();
 
    
            }
 
    
        }, 1000);
 
    
    </script>
 
    
</body>
 
    

 
    
</html>