fengchuanyu 15 小時之前
父節點
當前提交
1673317cc8
共有 3 個文件被更改,包括 79 次插入0 次删除
  1. 0 0
      4_BOM&DOM/3_DOM如何控制内容.html
  2. 28 0
      4_BOM&DOM/4_绑定事件.html
  3. 51 0
      4_BOM&DOM/练习题1_倒计时.html

+ 0 - 0
4_BOM&DOM/2_DOM如何控制内容.html → 4_BOM&DOM/3_DOM如何控制内容.html


+ 28 - 0
4_BOM&DOM/4_绑定事件.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <button>按钮</button>
+    <script>
+        // 获取元素
+        var btn = document.getElementsByTagName("button")[0];
+        // 绑定事件
+        // 1、on绑定事件  需要绑定事件的标签.on事件名 = 事件函数;
+        // btn.onclick = function(){
+        //     console.log("按钮被点击了");
+        // }
+
+        // 2、addEventListener()方法。需要绑定事件的标签.addEventListener("事件名,事件函数);
+        // btn.addEventListener("click",function(){})
+        btn.addEventListener("click",function(){
+            console.log("按钮被点击了");
+        })
+
+
+    </script>
+</body>
+</html>

+ 51 - 0
4_BOM&DOM/练习题1_倒计时.html

@@ -0,0 +1,51 @@
+<!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: #aaa;
+            color: #fff;
+            font-size: 50px;
+            font-weight: bold;
+            text-align: center;
+            line-height: 200px;
+            position: fixed;
+            top:50%;
+            left: 50%;
+            margin-top: -100px;
+            margin-left: -100px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">10</div>
+    <script>
+        // 倒计时
+        // 第一步:获取要控制的元素
+        var div1 = document.getElementsByClassName("box")[0];
+    
+        // 第二步:设置倒计时的时间
+        var timer = setInterval(function(){
+            // 第三步:获取box中的数字
+            // 注意:innerText属性返回的是字符串
+            var num = div1.innerText;
+            num *= 1;
+            // 第四步:将数字减1
+            num--;
+            // 第五步:将数字赋值给box
+            div1.innerText = num;
+            // 第六步:判断数字是否小于0
+            if(num <= 0){
+                // 第七步:清除倒计时器
+                clearInterval(timer);
+            }
+
+        },1000);
+    </script>
+</body>
+</html>