lovecoding
/
web250825


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!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>
    <!-- <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);//100-200
            this.top = 0;
            this.left = Math.random() * (screenWidth - this.width);
            this.newImg = './img/' + Math.floor(Math.random() * 4 + 1) + '.png';
        }
        // 绘制树叶
        Leaf.prototype.init = function() {
            var imgs = document.createElement("img");
            imgs.src = this.newImg;
            imgs.style.top = this.top + 'px';
            imgs.style.left = this.left + 'px';
            imgs.style.width = this.width + 'px';
            this.img = imgs;
            document.body.appendChild(imgs);
        }
        // 树叶下落
        Leaf.prototype.fall = function(){
            console.log(this)
            setTimeout(function() {
                console.log("触发",this)
               var timer = setInterval(function() {
                console.log(this,'哈哈哈')
                    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()*2000)
        }
        // 存放所有树叶
        let newArr = [];
        // 展示图片
        for(var i=0;i<20;i++) {
            var newLeaf = new Leaf();
            newArr.push(newLeaf);
            newLeaf.init();
            // newLeaf.fall()
        }
        // 点击树叶下落
        document.onclick = function() {
            for(var i=0;i<newArr.length;i++) {
                newArr[i].fall()
            }
        }
        // 随机数范围：Math.random()*(y-x)+x
    </script>
</body>

</html>