1 жил өмнө · 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