lovecoding
/
W0407


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!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>
    <!-- <a href=""></a> -->
    <!-- <img src="./img/1.png" alt=""> -->
    <script>
        var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var screenHeight = document.documentElement.clientHeight || document.body.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.top = this.top;
            imgs.style.left = this.left + 'px';
            document.body.appendChild(imgs);
            this.newImg = imgs;
        }
        var newArr = [];
        for (var i = 0; i < 20; i++) {
            var leaf = new Leaf();
            newArr.push(leaf);
            leaf.init()
        }
        Leaf.prototype.fall = function () {
            setTimeout(function () {
                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>