<!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>