lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    <!-- <img src="" alt=""> -->
    <script>
        // 1.获取屏幕的宽高
        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
        // 2.构造树叶属性函数
        function Leaf() {
            this.width = Math.random() * 100 + 100;
            this.top = 0;
            this.left = Math.random()*(screenWidth - this.width);
            this.bg = './img/' +Math.round(Math.random() * 3 + 1) + '.png';
        }
        // 3.初始化树叶
        Leaf.prototype.init = function() {
            var oImg = document.createElement('img');
            oImg.src = this.bg;
            oImg.style.width = this.width + 'px';
            oImg.style.top = this.top + 'px';
            oImg.style.left = this.left + 'px';
            this.img = oImg;
            document.body.appendChild(oImg);
        }
        // 4.点击下落树叶
        Leaf.prototype.fall = function() {
            setTimeout(function() {
                var timer = setInterval(function(){
                    if(this.img.offsetTop < screenHeight - this.img.offsetHeight) {
                      this.img.style.top =  this.img.offsetTop + 10 + 'px'
                    } else {
                        clearInterval(timer);
                    }
                }.bind(this),20)
            }.bind(this),Math.random()*3000);
        }

        var newList = [];
        for(var i=0;i<20;i++) {
            var leafs = new Leaf();
            newList.push(leafs);
            leafs.init();
        }
        document.onclick = function() {
            for(var i=0;i<newList.length;i++) {
                newList[i].fall();
            }
        }
        // new Leaf().fall()
    </script>
</body>
</html>