首頁 探索 說明
登入
lovecoding
/
web0715
10
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

add

fengchuanyu 9 月之前
父節點
a2e22ea6b8
當前提交
255eff31da
共有 4 個文件被更改，包括 85 次插入 和 1 次删除
統一視圖 顯示文件統計
  1. 二進制
      .DS_Store
  2. 53 0
      4_DOM&BOM/8_BOM定时函数取消.html
  3. 32 0
      4_DOM&BOM/9_DOM修改样式.html
  4. 0 1
      4_DOM&BOM/练习2_按钮控制倒计时.html

二進制
.DS_Store
查看文件


+ 53 - 0
4_DOM&BOM/8_BOM定时函数取消.html
查看文件 

@@ -0,0 +1,53 @@
 
+<!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>
 
+        .box{
 
+            width: 300px;
 
+            height: 300px;
 
+            box-shadow: 0 0 10px rgba(0,0,0.5);
 
+            background-color: #aaa;
 
+            border-radius: 10px;
 
+            position: fixed;
 
+            top:50%;
 
+            left: 50%;
 
+            margin-left:-150px;
 
+            margin-top: -150px;
 
+            text-align: center;
 
+        }
 
+        .btn{
 
+            width: 100px;
 
+            height: 40px;
 
+            line-height: 40px;
 
+            margin:0 auto;
 
+            border:1px solid #666;
 
+            cursor: pointer;
 
+        }
 
+        .box h1{
 
+            margin-top: 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <h1>100</h1>
 
+        <div class="btn">开始</div>
 
+    </div>
 
+
 
+    <script>
 
+        var oH1 = document.getElementsByTagName("h1")[0];
 
+        var oBtn = document.getElementsByClassName("btn")[0];
 
+        
+        oBtn.onclick = function(){
 
+            console.log("本次timer:"+timer);
 
+            var timer = setInterval(function(){
 
+                console.log(timer);
 
+                oH1.innerText--
 
+            },1000)
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 32 - 0
4_DOM&BOM/9_DOM修改样式.html
查看文件 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        oBox.onclick = function(){
 
+            oBox.style.width = "200px";
 
+            // 如果出现 background-color 修改成backgroundColor 驼峰命名方式
 
+            oBox.style.backgroundColor="blue";
 
+            this.style.height = "400px";
 
+        }
 
+        var oHtml = document.documentElement;
 
+        console.log(oHtml)
 
+        oHtml.onclick = function(){
 
+            console.log("click")
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 0 - 1
4_DOM&BOM/练习2_按钮控制倒计时.html
查看文件 

@@ -56,7 +56,6 @@
 
                     oH1.innerText = parseInt(oH1.innerText)-1
 
                     oH1.innerText = parseInt(oH1.innerText)-1
 
                 },1000)
 
                 },1000)
 
             }
 
             }
 
-
 
         }        
         }        
     </script>
 
     </script>
 
 </body>
 
 </body>