1 gadu atpakaļ · aa9a2aa257
--- a/js/js初阶/DOM/23.下落的树叶.html
+++ b/js/js初阶/DOM/23.下落的树叶.html
@@ -0,0 +1,63 @@
 
				+<!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>
			
 
				+    <!-- <img src="" alt=""> -->
			
 
				+    <script>
			
 
				+        // 1.获取屏幕的宽高
			
 
				+        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
			
 
				+        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
			
 
				+        // 2.构造树叶属性函数
			
 
				+        function Leaf() {
			
 
				+            this.width = Math.random() * 100 + 100;
			
 
				+            this.top = 0;
			
 
				+            this.left = Math.random()*(screenWidth - this.width);
			
 
				+            this.bg = './img/' +Math.round(Math.random() * 3 + 1) + '.png';
			
 
				+        }
			
 
				+        // 3.初始化树叶
			
 
				+        Leaf.prototype.init = function() {
			
 
				+            var oImg = document.createElement('img');
			
 
				+            oImg.src = this.bg;
			
 
				+            oImg.style.width = this.width + 'px';
			
 
				+            oImg.style.top = this.top + 'px';
			
 
				+            oImg.style.left = this.left + 'px';
			
 
				+            this.img = oImg;
			
 
				+            document.body.appendChild(oImg);
			
 
				+        }
			
 
				+        // 4.点击下落树叶
			
 
				+        Leaf.prototype.fall = function() {
			
 
				+            setTimeout(function() {
			
 
				+                var timer = setInterval(function(){
			
 
				+                    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()*3000);
			
 
				+        }
			
 
				+
			
 
				+        var newList = [];
			
 
				+        for(var i=0;i<20;i++) {
			
 
				+            var leafs = new Leaf();
			
 
				+            newList.push(leafs);
			
 
				+            leafs.init();
			
 
				+        }
			
 
				+        document.onclick = function() {
			
 
				+            for(var i=0;i<newList.length;i++) {
			
 
				+                newList[i].fall();
			
 
				+            }
			
 
				+        }
			
 
				+        // new Leaf().fall()
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/js/js初阶/DOM/img/1.png
+++ b/js/js初阶/DOM/img/1.png
--- a/js/js初阶/DOM/img/2.png
+++ b/js/js初阶/DOM/img/2.png
--- a/js/js初阶/DOM/img/3.png
+++ b/js/js初阶/DOM/img/3.png
--- a/js/js初阶/DOM/img/4.png
+++ b/js/js初阶/DOM/img/4.png