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