W260426/11.复习/10.下落的树叶.html

<!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: 0; */
        }
    </style>
</head>

<body>
    <script>
        const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const 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.newImgs = imgs;
        }
        let newArr = [];
        for (let i = 0; i < 20; i++) {
            let leaf = new Leaf();
            leaf.init();
            newArr.push(leaf)
        }
        Leaf.prototype.fail = 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].fail();
            }
        }
    </script>
</body>

</html>