lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!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;
            /* top: 10px;
            left: 100px;
            width: 300px; */
        }
    </style>
</head>

<body>
    <!-- <img src="./img/1.png" alt=""> -->
    <script>

        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
        // 树叶的位置（top left width）
        // 树叶的属性
        function Leaf() {
            // 构造函数 this指向当前实例
            this.width = Math.round(Math.random() * 100 + 100);
            this.top = 0;
            this.left = Math.random() * (screenWidth - this.width);
            this.newUrl = './img/' + Math.floor(Math.random() * 4 + 1) + '.png'
        }
        // 绘制树叶
        Leaf.prototype.init = function () {
            var imgs = document.createElement("img");
            imgs.src = this.newUrl;
            imgs.style.width = this.width + "px";
            imgs.style.top = this.top + "px";
            imgs.style.left = this.left + "px";
            document.body.appendChild(imgs);
            this.newImg = imgs;
        }
        // 绘制多片树叶  
        let newArr = [];
        for (var i = 0; i < 20; i++) {
            var leaf = new Leaf();
            newArr.push(leaf);
            leaf.init();
        }
        // 树叶落下
        Leaf.prototype.fall = function () {
            console.log(this)
            setTimeout(function () {
                console.log(this)
                var timer = setInterval(function () {
                    // 当前元素距离顶部的大小 小于 屏幕高度-元素自身高度
                    if (this.newImg.offsetTop < screenHeight - this.newImg.offsetHeight) {
                        this.newImg.style.top = this.newImg.offsetTop + 10 + "px";
                    } else {
                        clearInterval(timer);
                    }
                }.bind(this), 20)
            }.bind(this), Math.random() * 2000);

        }
        // 点击页面 让树叶落下
        document.onclick = function () {
            for (var i = 0; i < newArr.length; i++) {
                newArr[i].fall();
            }
        }
    </script>
</body>

</html>