lovecoding
/
W250913


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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;
            /* width: 200px; */
        }
    </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;
        function Leaf() {
            this.width = Math.round(Math.random() * 100 + 100);
            this.top = 0;
            this.left = Math.random() * (screenWidth - this.width);
            this.urls = './img/' + Math.floor(Math.random() * 4 + 1) + '.png'
        }
        // 绘制图片
        Leaf.prototype.init = function () {
            var imgs = document.createElement('img');
            imgs.src = this.urls;
            imgs.style.width = this.width + 'px';
            imgs.style.left = this.left + 'px';
            imgs.style.top = this.top + 'px';
            document.body.appendChild(imgs);
            this.newImgs = imgs;
        }
        // 展示图片
        let newArr = [];
        for (let i = 0; i < 20; i++) {
            let leaf = new Leaf();
            leaf.init();
            newArr.push(leaf);
        }
        // 树叶落下
        Leaf.prototype.fall = function () {
            setTimeout(() => {
               var timer = setInterval(() => {
                    if (this.newImgs.offsetTop < screenHeight - this.newImgs.offsetHeight) {
                        this.newImgs.style.top = this.newImgs.offsetTop + 10 + 'px';
                    } else {
                        clearInterval(timer);
                    }
                }, 20);
            }, Math.random() * 2000);
        }
        // 点击落下
        document.onclick = function () {
            for (let i = 0; i < newArr.length; i++) {
                newArr[i].fall();
            }
        }
    </script>
</body>

</html>