Home Esplora Aiuto
Accedi
lovecoding
/
web0715
10
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

add

fengchuanyu 10 mesi fa
parent
a1e5dfee7b
commit
a2e22ea6b8
3 ha cambiato i file con 101 aggiunte e 1 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 9 1
      4_DOM&BOM/6_DOM事件绑定.html
  2. 29 0
      4_DOM&BOM/7_DOM事件对象.html
  3. 63 0
      4_DOM&BOM/练习2_按钮控制倒计时.html

+ 9 - 1
4_DOM&BOM/6_DO事件绑定.html → 4_DOM&BOM/6_DOM事件绑定.html
Vedi File 

@@ -10,11 +10,19 @@
 
     <h1>world</h1>
 
     <h1>world</h1>
 
     <script>
 
     <script>
 
         var oH1 = document.getElementsByTagName("h1");
 
         var oH1 = document.getElementsByTagName("h1");
 
+        // 鼠标点击事件（单击）
 
         oH1[0].onclick = function(){
 
         oH1[0].onclick = function(){
 
             // console.log("hello world")
 
             // console.log("hello world")
 
             // oH1[0].innerText = "你好";
 
             // oH1[0].innerText = "你好";
 
-            this.innerText = "hello world"
 
+            this.innerText = "hello world";
 
         }
 
         }
 
+
 
+        var oBody = document.getElementsByTagName("body")[0];
 
+        oBody.oncontextmenu = function(){
 
+            console.log("hello");
 
+            return false;
 
+        }
 
+
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 29 - 0
4_DOM&BOM/7_DOM事件对象.html
Vedi File 

@@ -0,0 +1,29 @@
 
+<!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: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            margin:100px auto;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        // 参数重的e 为事件对象
 
+        oBox.oncontextmenu = function(e){
 
+            // 阻止浏览器默认行为
 
+            e.preventDefault();
 
+
 
+            console.log(e.clientY,e.clientX);
 
+        }        
+    </script>
 
+</body>
 
+</html>

+ 63 - 0
4_DOM&BOM/练习2_按钮控制倒计时.html
Vedi File 

@@ -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>
 
+        .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];
 
+        var time = null;
 
+        var isPlay = false;
 
+        oBtn.onclick = function(){
 
+            if(isPlay){
 
+                //暂停状态
 
+                this.innerText = "开始";
 
+                isPlay = false;
 
+                clearInterval(timer);
 
+            }else{
 
+                //开始状态
 
+                isPlay = true;
 
+                this.innerText = "暂停";
 
+                timer = setInterval(function(){
 
+                    oH1.innerText = parseInt(oH1.innerText)-1
 
+                },1000)
 
+            }
 
+
 
+        }        
+    </script>
 
+</body>
 
+</html>