From 59f3fb92764c07ad3d6f4a9c102f2f0129551770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:20:51 +0000
Subject: [PATCH 01/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/10.26=E7=AC=AC=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9Ajs.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92?=
 =?UTF-8?q?=E6=B1=B6/20231026=E7=AC=AC=E4=B8=80=E6=AC=A1=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?js.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/10.26\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md" => "49 \346\235\216\350\210\222\346\261\266/20231026\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/10.26\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md" "b/49 \346\235\216\350\210\222\346\261\266/20231026\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/10.26\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231026\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232js.md"
-- 
Gitee


From 483fdf82fd366f0a2b0f777f5b96c46136f87073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:21:33 +0000
Subject: [PATCH 02/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/10.27=E5=9F=BA=E7=A1=80=E7=BB=83?=
 =?UTF-8?q?=E4=B9=A0.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/202?=
 =?UTF-8?q?31027=E5=8F=98=E9=87=8F=E5=92=8C=E6=95=B0=E6=8D=AE=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...45\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/10.27\345\237\272\347\241\200\347\273\203\344\271\240.md" => "49 \346\235\216\350\210\222\346\261\266/20231027\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/10.27\345\237\272\347\241\200\347\273\203\344\271\240.md" "b/49 \346\235\216\350\210\222\346\261\266/20231027\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/10.27\345\237\272\347\241\200\347\273\203\344\271\240.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231027\345\217\230\351\207\217\345\222\214\346\225\260\346\215\256\347\261\273\345\236\213.md"
-- 
Gitee


From 66a506a59f718de0fe09126548afb828a0310c49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:22:29 +0000
Subject: [PATCH 03/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/10.31=E5=88=86=E6=94=AF=E5=92=8C?=
 =?UTF-8?q?=E5=BE=AA=E7=8E=AF=E4=BD=9C=E4=B8=9A.md=20=E4=B8=BA=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/20231031=20JS=E5=9F=BA=E7=A1=80.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231031 JS\345\237\272\347\241\200.md"                       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/10.31\345\210\206\346\224\257\345\222\214\345\276\252\347\216\257\344\275\234\344\270\232.md" => "49 \346\235\216\350\210\222\346\261\266/20231031 JS\345\237\272\347\241\200.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/10.31\345\210\206\346\224\257\345\222\214\345\276\252\347\216\257\344\275\234\344\270\232.md" "b/49 \346\235\216\350\210\222\346\261\266/20231031 JS\345\237\272\347\241\200.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/10.31\345\210\206\346\224\257\345\222\214\345\276\252\347\216\257\344\275\234\344\270\232.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231031 JS\345\237\272\347\241\200.md"
-- 
Gitee


From 7418aa4e64cbe07548a20dc0788c649722dd04c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:23:25 +0000
Subject: [PATCH 04/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.01=E6=95=B0=E7=BB=84.md=20?=
 =?UTF-8?q?=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/20231101=E6=95=B0?=
 =?UTF-8?q?=E7=BB=84=E4=BD=9C=E4=B8=9A.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231101\346\225\260\347\273\204\344\275\234\344\270\232.md"  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.01\346\225\260\347\273\204.md" => "49 \346\235\216\350\210\222\346\261\266/20231101\346\225\260\347\273\204\344\275\234\344\270\232.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.01\346\225\260\347\273\204.md" "b/49 \346\235\216\350\210\222\346\261\266/20231101\346\225\260\347\273\204\344\275\234\344\270\232.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.01\346\225\260\347\273\204.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231101\346\225\260\347\273\204\344\275\234\344\270\232.md"
-- 
Gitee


From ac5316232fbc1a04d41ede95fa6db9d766e6b34e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:23:40 +0000
Subject: [PATCH 05/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.02=E5=87=BD=E6=95=B0=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/202?=
 =?UTF-8?q?31102=E5=87=BD=E6=95=B0=E4=BD=9C=E4=B8=9A.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231102\345\207\275\346\225\260\344\275\234\344\270\232.md"  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.02\345\207\275\346\225\260\344\275\234\344\270\232.md" => "49 \346\235\216\350\210\222\346\261\266/20231102\345\207\275\346\225\260\344\275\234\344\270\232.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.02\345\207\275\346\225\260\344\275\234\344\270\232.md" "b/49 \346\235\216\350\210\222\346\261\266/20231102\345\207\275\346\225\260\344\275\234\344\270\232.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.02\345\207\275\346\225\260\344\275\234\344\270\232.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231102\345\207\275\346\225\260\344\275\234\344\270\232.md"
-- 
Gitee


From 168f6459cc11bd4fe8af56ada0c1f77d76dbb414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:23:55 +0000
Subject: [PATCH 06/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.03=E5=AF=B9=E8=B1=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/202?=
 =?UTF-8?q?31103=E5=AF=B9=E8=B1=A1=E4=BD=9C=E4=B8=9A.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231103\345\257\271\350\261\241\344\275\234\344\270\232.md"  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.03\345\257\271\350\261\241\344\275\234\344\270\232.md" => "49 \346\235\216\350\210\222\346\261\266/20231103\345\257\271\350\261\241\344\275\234\344\270\232.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.03\345\257\271\350\261\241\344\275\234\344\270\232.md" "b/49 \346\235\216\350\210\222\346\261\266/20231103\345\257\271\350\261\241\344\275\234\344\270\232.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.03\345\257\271\350\261\241\344\275\234\344\270\232.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231103\345\257\271\350\261\241\344\275\234\344\270\232.md"
-- 
Gitee


From 169b5c5a6b432be1bd33fc146518d8860b29c88e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:24:16 +0000
Subject: [PATCH 07/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.07Dom=E5=AF=B9=E8=B1=A1.md=20?=
 =?UTF-8?q?=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/20231107Dom?=
 =?UTF-8?q?=E5=AF=B9=E8=B1=A1.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231107Dom\345\257\271\350\261\241.md"                       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.07Dom\345\257\271\350\261\241.md" => "49 \346\235\216\350\210\222\346\261\266/20231107Dom\345\257\271\350\261\241.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.07Dom\345\257\271\350\261\241.md" "b/49 \346\235\216\350\210\222\346\261\266/20231107Dom\345\257\271\350\261\241.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.07Dom\345\257\271\350\261\241.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231107Dom\345\257\271\350\261\241.md"
-- 
Gitee


From c2dc6d34bb20d0d106b176e8c249f88f9f4b5c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:30:12 +0000
Subject: [PATCH 08/17] 11.08
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李舒汶 <3228916049@qq.com>
---
 ...14\345\256\232\346\227\266\345\231\250.md" | 392 ++++++++++++++++++
 1 file changed, 392 insertions(+)
 create mode 100644 "49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md" "b/49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"
new file mode 100644
index 0000000..3130b39
--- /dev/null
+++ "b/49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"	
@@ -0,0 +1,392 @@
+## 表单与定时器
+
+#### 操作表单元素属性
+
+表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+
+正常的有属性有取值的跟其他的标签属性没有任何区别
+
+获取:DOM对象.属性名
+
+设置:DOM对象.属性名= 新值
+
+```html
+  <!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+
+<body>
+    <input type="text" value="请输入">
+    <button disabled>按钮</button>
+    <input type="checkbox" name="" id="" class="agree">
+    <script>
+        // 1. 获取元素
+        let input = document.querySelector('input')
+        // 2. 取值或者设置值  得到input里面的值可以用 value
+        // console.log(input.value)
+        input.value = '小米手机'
+        input.type = 'password'
+
+        // 2. 启用按钮
+        let btn = document.querySelector('button')
+        // disabled 不可用   =  false  这样可以让按钮启用
+        btn.disabled = false
+        // 3. 勾选复选框
+        let checkbox = document.querySelector('.agree')
+        checkbox.checked = false
+    </script>
+</body>
+
+</html>
+```
+### 自定义属性
+
+标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
+
+自定义属性：
+
+在html5中推出来了专门的data-自定义属性  
+
+在标签上一律以data-开头
+
+在DOM对象上一律以dataset对象方式获取
+
+~~~html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+</head>
+
+<body>
+   <div data-id="1"> 自定义属性 </div>
+    <script>
+        // 1. 获取元素
+        let div = document.querySelector('div')
+        // 2. 获取自定义属性值
+         console.log(div.dataset.id)
+      
+    </script>
+</body>
+
+</html>
+~~~
+
+### 间歇函数
+
+> 知道间歇函数的作用，利用间歇函数创建定时任务。
+
+`setInterval` 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
+
+```html
+<script>
+  // 1. 定义一个普通函数
+  function repeat() {
+    console.log('不知疲倦的执行下去....')
+  }
+
+  // 2. 使用 setInterval 调用 repeat 函数
+  // 间隔 1000 毫秒，重复调用 repeat
+  setInterval(repeat, 1000)
+</script>
+```
+
+### 修改表单属性
+
+```html
+<body>
+  <input type="text">
+  <input type="checkbox" >
+  <button>点击</button>
+  <!-- <input type="radio" name="sex" id="man">男
+  <input type="radio" name="sex" id="woman">女 -->
+  专业：<select name="pro" id="">
+    <option value="电商">电商</option>
+    <option value="开发">开发</option>
+    <option value="工商">工商</option>
+</select>
+  <script>
+    // 1 获取元素 
+    let input = document.querySelectorAll('input');
+    //  let input = document.querySelectorAll('input');
+
+    // 2. 获取值  获取表单里面的值 用的  表单对象.value
+    console.log(input.value);
+    // console.log(input.value);
+
+    // 3. 设置表单的值 表单对象.value = 值
+    input.value='值';
+    // input.value = '电脑888'
+
+    // 4. 设置表单类型 表单对象.type
+    input.type='button';
+    // input.type = 'button';
+
+    // 5. 复选框，单选框，选中与不选中 checked ture false  
+    input[1].checked = true;
+
+    // 6.按钮的可用与不可用 disabled 禁用  ture false
+    let btn = document.querySelector('button');
+    btn.disabled = true;
+    // let btn = document.querySelector('button');
+    // btn.disabled = true;
+
+    // 7. 下拉框的选择  selected ture false
+    let opt = document.querySelectorAll('option'); // 选择所有option
+    opt[1].selected = true;
+  </script>
+</body>
+```
+
+### 自定义属性
+
+```html
+<body>
+  <div data-id="1" data-spm="不知道">1</div>
+  <div data-id="2">2</div>
+  <div data-id="3">3</div>
+  <div data-id="4">4</div>
+  <div data-id="5">5</div>
+  <img src="" alt=""  data-num="110">
+  <script>  
+    //在html5中推出来了专门的data-自定义属性  
+    // 在标签上一律以data-开头
+    // 在DOM对象上一律以对象名.dataset.自定义属性名 对象方式获取
+    let div = document.querySelector('div');
+    div.dataset.id='6';
+  </script>
+</body>
+```
+
+### 定时器
+
+```html
+<body>
+  <script>
+    // 每间隔一段时间，就执行一个函数
+    //定义定时器 setInterval(匿名函数, 间隔时间)  
+    // setInterval(function(){
+    //   document.write('1')
+    // },1000)
+
+    //定义定时器 setInterval(函数名, 间隔时间)  函数名不要加小括号
+    function getNum(){
+      document.write('2');
+    }
+
+    // 给定时器取个名字
+    let time = setInterval(getNum(),1000);
+
+    // 根据名字关闭定时器  clearInterval(表示定时器的变量)
+    clearInterval(time);
+  </script>
+</body>
+```
+
+### 用户注册倒计时
+
+```html
+<body>
+    <textarea name="" id="" cols="30" rows="10">
+        用户注册协议
+        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
+        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
+    </textarea>
+    <br>
+    <button class="btn" disabled>我已经阅读用户协议(5)</button>
+    <script>
+        // 1. 获取元素
+        let btn = document.querySelector('.btn');
+         
+        // 2. 倒计时起点
+        let i=5;
+        function start(){
+            btn.innerHTML=`我已经阅读用户协议(${i})`;
+            i--;
+            if(i==0){
+                clearInterval(stop);
+                btn.innerHTML='我已经阅读用户协议';
+                btn.disabled = false;
+            }
+        };
+        start();
+        let stop = setInterval(start,1000);
+    </script>
+</body>
+```
+
+## 作业
+
+### 轮播图定时版
+
+```html
+<style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 1. 初始数据
+    const sliderData = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+    // 1. 获取元素 
+    let img = document.querySelector('.slider-wrapper img');
+    let p = document.querySelector('.slider-footer p');
+    let div = document.querySelector('.slider-footer');
+    
+    let i=0;
+   
+    // 2. 开启定时器
+    setInterval(function(){
+      i++;
+      if(i>=sliderData.length){
+        i=0;
+      }
+      // 数组随机数  Math.floor(Math.random()*数组名字.length);
+        // let random = Math.floor(Math.random()*(sliderData.length));
+      
+      // 随机数对应的那个数组对象
+        //  console.log(sliderData[random]);
+      
+      // 取得图片地址，文字内容，颜色值
+      newImg = sliderData[i].url;
+      newP = sliderData[i].title;
+      newDiv = sliderData[i].color;
+
+      // 分别修改图片，文字和颜色
+      img.src = newImg;
+      p.innerHTML = newP;
+      div.style.backgroundColor = newDiv;
+
+      // 改变小圆点
+       // 先清除原有样式
+       let li = document.querySelector(`.slider-footer li:nth-child(${i+1})`);
+       document.querySelector('.active').classList.remove('active');
+      
+       // 新添加
+       li.classList.add('active');
+    },1000);
+  </script>
+</body>
+```
\ No newline at end of file
-- 
Gitee


From 7beb50d8e9ed69656d0d50b8af7199aaa24ae286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:30:26 +0000
Subject: [PATCH 09/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.08=E8=A1=A8=E5=8D=95=E5=92=8C?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E5=99=A8.md=20=E4=B8=BA=2049=20=E6=9D=8E?=
 =?UTF-8?q?=E8=88=92=E6=B1=B6/20231108=E8=A1=A8=E5=8D=95=E5=92=8C=E5=AE=9A?=
 =?UTF-8?q?=E6=97=B6=E5=99=A8.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...45\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md" => "49 \346\235\216\350\210\222\346\261\266/20231108\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md" "b/49 \346\235\216\350\210\222\346\261\266/20231108\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.08\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231108\350\241\250\345\215\225\345\222\214\345\256\232\346\227\266\345\231\250.md"
-- 
Gitee


From 435c8699ec87eeea6121fcf4614a384e7f689030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:34:24 +0000
Subject: [PATCH 10/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.21=E6=BB=9A=E5=8A=A8=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/202?=
 =?UTF-8?q?31121=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=E4=BA=8B=E4=BB=B6.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...51\235\242\346\273\232\345\212\250\344\272\213\344\273\266.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.21\346\273\232\345\212\250\344\272\213\344\273\266.md" => "49 \346\235\216\350\210\222\346\261\266/20231121\351\241\265\351\235\242\346\273\232\345\212\250\344\272\213\344\273\266.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.21\346\273\232\345\212\250\344\272\213\344\273\266.md" "b/49 \346\235\216\350\210\222\346\261\266/20231121\351\241\265\351\235\242\346\273\232\345\212\250\344\272\213\344\273\266.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.21\346\273\232\345\212\250\344\272\213\344\273\266.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231121\351\241\265\351\235\242\346\273\232\345\212\250\344\272\213\344\273\266.md"
-- 
Gitee


From 98b211ddec1f81b75b665d57af440b5bac2f40ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:34:39 +0000
Subject: [PATCH 11/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.10=E4=BA=8B=E4=BB=B6.md=20?=
 =?UTF-8?q?=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/20231110=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231110\344\272\213\344\273\266.md"                          | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.10\344\272\213\344\273\266.md" => "49 \346\235\216\350\210\222\346\261\266/20231110\344\272\213\344\273\266.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.10\344\272\213\344\273\266.md" "b/49 \346\235\216\350\210\222\346\261\266/20231110\344\272\213\344\273\266.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.10\344\272\213\344\273\266.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231110\344\272\213\344\273\266.md"
-- 
Gitee


From 250733d78c66c303858dda1501ff0d3119ed2248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:35:05 +0000
Subject: [PATCH 12/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.14=E4=BA=8B=E4=BB=B6.md=20?=
 =?UTF-8?q?=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/20231114=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E6=B5=81.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231114\344\272\213\344\273\266\346\265\201.md"              | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.14\344\272\213\344\273\266.md" => "49 \346\235\216\350\210\222\346\261\266/20231114\344\272\213\344\273\266\346\265\201.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.14\344\272\213\344\273\266.md" "b/49 \346\235\216\350\210\222\346\261\266/20231114\344\272\213\344\273\266\346\265\201.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.14\344\272\213\344\273\266.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231114\344\272\213\344\273\266\346\265\201.md"
-- 
Gitee


From 7cf685fe16918fbe370feb5bce081b09882ab4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:35:58 +0000
Subject: [PATCH 13/17] 1109
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李舒汶 <3228916049@qq.com>
---
 ...09\347\233\221\345\220\254\345\231\250.md" | 420 ++++++++++++++++++
 1 file changed, 420 insertions(+)
 create mode 100644 "49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md"

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md" "b/49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md"
new file mode 100644
index 0000000..d0a0d6a
--- /dev/null
+++ "b/49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md"	
@@ -0,0 +1,420 @@
+## 监听器
+
+```html
+<body>
+  <h3>事件监听</h3>
+  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
+  <button id="btn">点击改变文字颜色</button>
+  <script>
+    // 1. 获取 button 对应的 DOM 对象
+    let btn = document.querySelector('#btn');
+
+    // 2. 添加事件监听  add 添加 Event 事件 Listener  监听器
+    // 当btn这个对象，被click(单击)时，就执行function
+    btn.addEventListener('click',function(){
+      console.log('点击')
+    })
+   
+    // 什么是回调函数
+    //  functionA(functionB)
+
+    // 3. 只要用户点击了按钮，事件便触发了！！！
+
+    /* 
+    `addEventListener` 是 DOM 对象专门用来添加事件监听的方法
+   ，它的两个参数分别为【事件类型】和【事件回调】。
+   */
+
+   // 事件类型：鼠标事件，键盘事件，表单事件，焦点事件
+      
+   /* 
+    1.鼠标事件
+    click 单击
+    dblclick 双击 doubleClick
+    mouseenter 鼠标移入
+    mouseleave 鼠标离开
+
+    2.键盘事件
+    keyDown  键盘被按下
+    keyUp  键盘按下后被抬起
+
+    3.焦点事件
+    focus 获得焦点
+    flur 失去焦点 
+
+    4.表单事件
+    input 文本框输入事件
+   */
+  </script>
+</body>
+```
+
+```html
+<body>
+  <button>点击</button>
+  <script>
+    // 需求： 点击了按钮，弹出一个对话框
+    // 1. 事件源   按钮 
+    let btn  = document.querySelector('button');
+   
+    // 2.事件类型 点击鼠标   click 字符串
+    btn.addEventListener('click',function(){
+      
+      // 3. 事件处理程序 弹出对话框 
+      alert('点击');
+    })
+  </script>
+</body>
+```
+
+### 点击关闭
+
+```html
+<body>
+  <div class="box" >
+    我是广告
+    <div class="box1">X</div>
+  </div>
+  <button>切换</button>
+  <script>
+    // 1. 获取事件源，要被点击的那个对象 
+    let box1 = document.querySelector('.box1');
+    let box = document.querySelector('.box');
+    let btn = document.querySelector('button');
+      
+    //  关闭的是大盒子
+    box1.addEventListener('click',function(){
+      box.style.display = 'none';
+    })
+  
+    // 2. 事件侦听
+    btn.addEventListener('click',function(){
+      box.style.display = '';
+    })
+  </script>
+</body>
+```
+
+### 随机点名案例
+
+```html
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        h2 {
+            text-align: center;
+        }
+
+        .box {
+            width: 600px;
+            margin: 50px auto;
+            display: flex;
+            font-size: 25px;
+            line-height: 40px;
+        }
+
+        .qs {
+
+            width: 450px;
+            height: 40px;
+            color: red;
+
+        }
+
+        .btns {
+            text-align: center;
+        }
+
+        .btns button {
+            width: 120px;
+            height: 35px;
+            margin: 0 50px;
+        }
+    </style>
+<body>
+    <h2>随机点名</h2>
+    <div class="box">
+        <span>名字是：</span>
+        <div class="qs">这里显示姓名</div>
+    </div>
+    <div class="btns">
+        <button class="start">开始</button>
+        <button class="end">结束</button>
+    </div>
+    <script>
+        // 数据数组 代表要被抽取的名单
+        let arr = ['TXT','Straykids','ENHYPEN','ATEEZ','THEBOYZ','TREASURE']
+      
+        // 获取元素对象
+        let start = document.querySelector('.btns .start');
+        let end = document.querySelector('.btns .end');
+        let name = document.querySelector('.box .qs');
+        let timer = null;
+        let random = 0;
+
+        // 给开始按钮添加点击事件
+        start.addEventListener('click',function(){
+            timer = setInterval(function(){
+                random = Math.floor(Math.random()*(arr.length))
+                name.innerHTML = arr[random]
+            },50)
+        });
+
+        // 给结束按钮添加一个点击事件
+       end.addEventListener('click',function(){
+            clearInterval(timer);
+            arr.splice(random,1);
+            if(arr.length==0){
+                name.innerHTML='抽完了';
+            }
+       })
+    </script>
+</body>
+```
+
+oncilck 和 addEventListener 的区别
+
+```html
+<body>
+  <button class="a2">点击</button>
+  <script>
+    // 事件监听与onclick这种形式的区别
+    const btn = document.querySelector('button')
+
+    //   alert(11)
+    // }
+    // btn.onclick = function () {
+    //   alert(22)
+    // }
+
+    // // let num = 10
+    // // num = 20
+    // btn.addEventListener('click', function () {
+    //   alert(11)
+    // })
+    // btn.addEventListener('click', function () {
+    //   alert(22)
+    // })
+  </script>
+</body>
+```
+
+```html
+<body>
+  <div>111</div>
+  <script>
+    let div = document.querySelector('div');
+    // 单击
+    // div.addEventListener('click',function(){
+    //   document.write('单击');
+    // })
+   
+    // 双击
+    div.addEventListener('dblclick',function(){
+      document.write('双击');
+    })
+   
+    // 鼠标经过
+    // div.addEventListener('mouseenter',function(){
+    //   document.write('经过');
+    // })
+   
+    // 鼠标离开
+    div.addEventListener('mouseleave',function(){
+      document.write('离开');
+    })
+  </script>
+</body>
+```
+
+### 轮播图
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 1. 初始数据
+    const data = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+    
+    // 获取元素
+    let img = document.querySelector('.slider-wrapper img');
+    let p = document.querySelector('.slider-footer p');
+    let div = document.querySelector('.slider-footer');
+
+    // 定义相关的变量
+    let i=0;
+    let timer = null;
+
+    //先用定时器让其自动转换
+    timer = setInterval(function(){
+      i++;
+      i=i>=data.length?0:i;
+      change()
+    },1000)
+    function change() {
+      img.src=data[i].url;
+      p.innerHTML=data[i].title;
+      div.style.backgroundColor=data[i].color;
+      document.querySelector('.active')
+      let li = document.querySelector(`.slider-footer li:nth-child(${i+1})`);
+      document.querySelector('.active').classList.remove('active');
+      li.classList.add('active');
+    }
+    
+    // 鼠标移动到图片，就暂时滚动
+    img.addEventListener('mouseenter',function(){
+      clearInterval(timer);
+    })
+    img.addEventListener('mouseleave',function(){
+      timer = setInterval(function(){
+        i++;
+        i=i>=data.length?0:i;
+        change()
+      },1000)
+    })
+
+    // 下一页
+    let next = document.querySelector('.toggle .next')
+    next.addEventListener('click',function(){
+      i++;
+      i=i>=data.length?0:i;
+      change();
+    })
+
+    // 上一页
+    let prev = document.querySelector('.toggle .prev')
+    prev.addEventListener('click',function(){
+      i--;
+      i=i<0?data.length-1:i;
+      change();
+    })
+  </script>
+</body>
+</html>
+```
\ No newline at end of file
-- 
Gitee


From 46c41340cd5805f5a99e9ca4de7e46e452470cba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:36:13 +0000
Subject: [PATCH 14/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.09=E7=9B=91=E5=90=AC=E5=99=A8.md?=
 =?UTF-8?q?=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/20231109?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E5=99=A8.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231109\347\233\221\345\220\254\345\231\250.md"              | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md" => "49 \346\235\216\350\210\222\346\261\266/20231109\347\233\221\345\220\254\345\231\250.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md" "b/49 \346\235\216\350\210\222\346\261\266/20231109\347\233\221\345\220\254\345\231\250.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.09\347\233\221\345\220\254\345\231\250.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231109\347\233\221\345\220\254\345\231\250.md"
-- 
Gitee


From 1f12ecc3923a12f41bddb48cd236503479c08fd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Thu, 23 Nov 2023 08:40:11 +0000
Subject: [PATCH 15/17] 1123
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李舒汶 <3228916049@qq.com>
---
 ...64\345\222\214\350\212\202\347\202\271.md" | 855 ++++++++++++++++++
 1 file changed, 855 insertions(+)
 create mode 100644 "49 \346\235\216\350\210\222\346\261\266/20231122\346\227\245\346\234\237\346\227\266\351\227\264\345\222\214\350\212\202\347\202\271.md"

diff --git "a/49 \346\235\216\350\210\222\346\261\266/20231122\346\227\245\346\234\237\346\227\266\351\227\264\345\222\214\350\212\202\347\202\271.md" "b/49 \346\235\216\350\210\222\346\261\266/20231122\346\227\245\346\234\237\346\227\266\351\227\264\345\222\214\350\212\202\347\202\271.md"
new file mode 100644
index 0000000..ee813b8
--- /dev/null
+++ "b/49 \346\235\216\350\210\222\346\261\266/20231122\346\227\245\346\234\237\346\227\266\351\227\264\345\222\214\350\212\202\347\202\271.md"	
@@ -0,0 +1,855 @@
+### 实例化日期对象
+
+```html
+<script>
+    // 当前时间对象 
+    let time1 = new Date();
+    console.log(time1);
+
+    // 指定时间，将指定的有时间格式的字符串转化成时间对象 '2022-10-10 15:30:05'
+    let time2 = new Date('2023-11-22 17:17:00');
+    console.log(time2);
+    let time3 = new Date('2023');
+    console.log(time3);
+    let time4 = new Date('2023-11');
+    console.log(time4);
+  </script>
+```
+
+### 常见的日期对象方法
+
+```html
+<script>
+    // 获得日期对象
+    const date = new Date()
+    // 使用里面的方法
+    console.log(date);
+    console.log('今年：',date.getFullYear());  //4位数的年份
+    console.log('月份：',date.getMonth()); // 实际月份要加1 0-11
+    console.log('天：',date.getDate()); 
+    console.log('时：',date.getHours()); 
+    console.log('分：',date.getMinutes()); 
+    console.log('秒：',date.getSeconds()); 
+    console.log('星期：',date.getDay());   // 整数值的表示方法 0~6
+
+
+    // 我要根据日期 Day()  0 ~ 6  返回的是 星期一
+    const weekName = ['星期天','星期1','星期2','星期3','星期4','星期5','星期6'];
+    console.log(weekName);
+  </script>
+```
+
+### 时间的另一个写法
+
+```html
+<style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid pink;
+      text-align: center;
+      line-height: 40px;
+    }
+  </style>
+<body>
+  <div></div>
+  <script>
+    const div = document.querySelector('div')
+    // 得到日期对象
+    const date = new Date()
+    console.log(date);
+   
+    div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
+    div.innerHTML = date.toLocaleDateString()  // 2022/4/1
+    div.innerHTML = date.toLocaleTimeString()  // 09:41:21
+    
+  </script>
+</body>
+```
+
+### 得到时间戳
+
+```html
+<script>
+    // 时间戳 从1970年1月1日0点0分0秒到现在的秒数或毫秒数
+    
+    // 获得当前时间的时间戳 三种方式
+
+    // 毫秒 /1000 = 秒
+    console.log(new Date().getTime());
+    console.log(+new Date());
+    console.log(Date.now());
+   
+    // 获得指定时间的时间戳,两种
+    console.log(new Date('2023-11-22').getTime());
+    console.log(new Date('2023-11-22').valueOf())
+  </script>
+```
+
+### 父节点
+
+```html
+<body>
+  <div class="yeye">
+    <div class="dad">
+      <div class="baby">x</div>
+    </div>
+  </div>
+  <script>
+    // 通过子元素，子对象，子节点，找父元素，找父对象，父节点
+    let baby = document.querySelector('.baby');
+    console.log(baby);
+    console.log(baby.parentNode); // baby对象的父节点 dad
+    console.log(baby.parentNode.parentNode); // baby对象的父节点的父节点 yeye
+    console.log(baby.parentNode.parentNode.parentNode) // html
+    console.log(baby.parentNode.parentNode.parentNode.parentNode); // document
+  </script>
+</body>
+```
+
+### 子节点
+
+```html
+<body>
+  <ul>
+    <li>1</li>
+    <li>2</li>    
+    <li>3</li> 
+    <li>4</li>   
+    <li>5</li>
+  </ul>
+  <script>
+    // 父
+    const ul = document.querySelector('ul');
+
+    // ul.children 通过爷节点，得到所有子节点
+
+    // 具体的子节点的两种方法
+    let li1 = ul.children[0];
+    console.log(li1);
+    let li2 = document.querySelector('ul li:nth-child(2)');
+    console.log(li2);
+    
+    // 兄弟节点
+    // 上一个节点
+    console.log(li2.previousElementSibling);
+    // 下一个节点
+    console.log(li2.nextElementSibling);
+    </script>
+    </body>
+```
+
+### 增加节点
+
+```html
+<body>
+  <ul>
+    <li>我是老大</li>
+  </ul>
+  <script>
+     // 父节点
+     let ul = document.querySelector('ul');
+
+    // 老大后面添加一个老二
+    // 1,创建节点
+    let li = document.createElement('li');
+    li.innerHTML = '123';
+
+    // 3，将li追加到最后一个位置
+    // 父节点.appendChild(子节点) 表示在父节点的最末尾追加一个新的子节点
+    ul.appendChild(li);
+   
+    // 父节点.insertBefore(新子节点，哪个子节点前面插入) 
+    let ol = document.createElement('li');
+    ol.innerHTML = 'yoi';
+    ul.insertBefore(ol,ul.children[0]);
+  </script>
+</body>
+```
+
+### 克隆节点
+
+```html
+<body>
+  <ul>
+    <li>1</li>
+    <li>2</li>
+    <!-- <li>2</li> -->
+    <li>3</li>
+
+  </ul>
+  <script>
+    // 复制li2
+    // 父
+    let ul = document.querySelector('ul');
+    
+    // 找到要被复制的节点li
+    // 要被克隆的对象.cloneNode(True/False) ,如果true就是标签和内容一起克隆，如果是false只克隆标签
+    let li2 = ul.children[1].cloneNode(true);
+    li2.innerHTML = '2C';
+    ul.insertBefore(li2,ul.children[2]);
+
+    // 删除节点 
+    // 父节点.removeChild(要删除的子节点)
+    ul.removeChild(ul.children[2]);
+  </script>
+</body>
+```
+
+### 删除节点
+
+```html
+<body>
+  <div class="box">123</div>
+  <ul>
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+    <li>4</li>
+  </ul>
+  <script>
+    const ul = document.querySelector('ul')
+    // 删除节点  父元素.removeChlid(子元素)
+    ul.removeChild(ul.children[2])
+    
+  </script>
+</body>
+```
+
+### 显示格式化时间
+
+```html
+<style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid pink;
+      text-align: center;
+      line-height: 40px;
+    }
+ </style>
+ <body>
+  <div></div>
+  <!-- 电子时钟效果：今天是: 2023年11月20号 15:12:00 -->
+  <script>
+    // 用定时器，每秒刷新一次
+    setInterval(function(){
+      // 创建时间对象
+      let date = new Date();
+      let div = document.querySelector('div');
+
+      // 分别得到年月日时分秒
+      let y = date.getFullYear();
+      let m1 = date.getMonth()+1;
+      let d = date.getDate();
+      let h = date.getHours();
+      let m2 = date.getMinutes();
+      let s = date.getSeconds();
+
+      if(s<10){
+        s ='0'+s;
+      }
+
+       // 拼接字符串，得到一个完整的时间
+      let str = `今天是：${y}年${m1}月${d}号 ${h}:${m2}:${s}`;
+      div.innerHTML = str;
+    },1000) 
+  </script>
+</body>
+```
+
+### 倒计时
+
+```html
+<style>
+    .countdown {
+      width: 240px;
+      height: 305px;
+      text-align: center;
+      line-height: 1;
+      color: #fff;
+      background-color: brown;
+      /* background-size: 240px; */
+      /* float: left; */
+      overflow: hidden;
+    }
+
+    .countdown .next {
+      font-size: 16px;
+      margin: 25px 0 14px;
+    }
+
+    .countdown .title {
+      font-size: 33px;
+    }
+
+    .countdown .tips {
+      margin-top: 80px;
+      font-size: 23px;
+    }
+
+    .countdown small {
+      font-size: 17px;
+    }
+
+    .countdown .clock {
+      width: 142px;
+      margin: 18px auto 0;
+      overflow: hidden;
+    }
+
+    .countdown .clock span,
+    .countdown .clock i {
+      display: block;
+      text-align: center;
+      line-height: 34px;
+      font-size: 23px;
+      float: left;
+    }
+
+    .countdown .clock span {
+      width: 34px;
+      height: 34px;
+      border-radius: 2px;
+      background-color: #303430;
+    }
+
+    .countdown .clock i {
+      width: 20px;
+      font-style: normal;
+    }
+  </style>
+  <body>
+  <div class="countdown">
+    <p class="next">今天是2023年11月21日</p>
+    <p class="title">下班倒计时</p>
+    <p class="clock">
+      <span id="hour">00</span>
+      <i>:</i>
+      <span id="minutes">25</span>
+      <i>:</i>
+      <span id="second">20</span>
+    </p>
+    <p class="tips">17:40:00下课</p>
+  </div>
+  <script>
+    // 指定未来时间
+    const last = +new Date('2023-11-22 21:00:00');
+
+    // 随机背景色  css中，表示颜色的值有三种red,blue 16进制 #FFFFFF #000000  RGB(255,255,255)
+    function getColor(){
+      const r = parseInt(Math.random()*256);
+      const g = parseInt(Math.random()*256);
+      const b = parseInt(Math.random()*256);
+      return `rgb(${r},${g},${b})`;
+    }
+
+    function fx(){
+       // 当前时间
+      const now = +new Date();
+    
+      // 时间差 未来-现在 / 1000
+      // 毫秒换成秒
+      const total = (last-now)/1000;
+
+      // 得到时
+      let h = parseInt(total / 60 / 60 % 24);
+
+      // 得到分
+      let m = parseInt(total / 60 % 60 );
+
+      // 得到秒
+      let s = parseInt(total % 60);
+
+      h=h<10 ? '0'+h:h;
+      m=m<10 ? '0'+m:m;
+      s=s<10 ? '0'+s:s;
+
+      // 将时分秒，放到对应的容器中
+      document.querySelector('#hour').innerHTML=h;
+      document.querySelector('#minutes').innerHTML=m;
+      document.querySelector('#second').innerHTML=s;
+    }
+
+   setInterval(function(){
+      fx();
+      document.querySelector('.countdown').style.backgroundColor = getColor();
+   },1000)
+</script>
+</body>
+```
+
+### 点击关闭
+
+```html
+<style>
+    .box {
+      position: relative;
+      width: 1000px;
+      height: 200px;
+      background-color: pink;
+      margin: 100px auto;
+      text-align: center;
+      font-size: 50px;
+      line-height: 200px;
+      font-weight: 700;
+    }
+
+    .box1 {
+      position: absolute;
+      right: 20px;
+      top: 10px;
+      width: 20px;
+      height: 20px;
+      background-color: skyblue;
+      text-align: center;
+      line-height: 20px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  </style>
+<body>
+  <div class="box">
+    我是广告
+    <div class="box1">X</div>
+  </div>
+  <script>
+    let box1 = document.querySelector('.box1');
+    box1.addEventListener('click',function(){
+      box1.parentNode.style.display='none';
+    })
+  </script>
+</body>
+```
+
+
+
+### 学生信息案例
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>学生信息管理</title>
+  <link rel="stylesheet" href="css/index.css" />
+</head>
+
+<body>
+  <h1>新增学员</h1>
+  <form class="info" autocomplete="off">
+    姓名：<input type="text" class="uname" name="uname" />
+    年龄：<input type="text" class="age" name="age" />
+    性别:
+    <select name="gender" class="gender">
+      <option value="男">男</option>
+      <option value="女">女</option>
+    </select>
+    薪资：<input type="text" class="salary" name="salary" />
+    就业城市：<select name="city" class="city">
+      <option value="北京">北京</option>
+      <option value="上海">上海</option>
+      <option value="广州">广州</option>
+      <option value="深圳">深圳</option>
+      <option value="曹县">曹县</option>
+    </select>
+    <button class="add">录入</button>
+  </form>
+
+  <h1>就业榜</h1>
+  <table>
+    <thead>
+      <tr>
+        <th>学号</th>
+        <th>姓名</th>
+        <th>年龄</th>
+        <th>性别</th>
+        <th>薪资</th>
+        <th>就业城市</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- 
+        <tr>
+          <td>1001</td>
+          <td>欧阳霸天</td>
+          <td>19</td>
+          <td>男</td>
+          <td>15000</td>
+          <td>上海</td>
+          <td>
+            <a href="javascript:">删除</a>
+          </td>
+        </tr> 
+        -->
+    </tbody>
+  </table>
+  <script>
+    // 获取所在表单项目
+    let uname = document.querySelector('.uname');
+    let age = document.querySelector('.age');
+    let gender = document.querySelector('.gender');
+    let salary = document.querySelector('.salary');
+    let city = document.querySelector('.city');
+
+    // 通用的表格tbody
+    let tbody = document.querySelector('tbody');
+
+    // 存学号
+    let stuid=0;
+
+    // 创建一个数组用来存放所有录入的学生对象
+    let data = [];
+
+    // 获取表单对象form info submit reses()
+    let info  = document.querySelector('.info');
+    info.addEventListener('submit',function(e){
+      // 触发提交的功能，会刷新浏览器，所以要阻止默认行为
+      e.preventDefault();
+
+      // 在保存数据前先判单非空
+      // 先找到要判断的所有对象，所有带有name属性的对象
+      let items = document.querySelectorAll('[name]') // 伪数组
+      for(let i=0;i<items.length;i++){
+        if(items[i].value===''){
+          // 只要是空的就直接中断并提示警告
+          return alert('所有的内容都要填写');
+        }
+      }
+
+      let obj = {
+        // 对象的属性是健：值
+        stuId:++stuid,
+        uname:uname.value,
+        age:age.value,
+        gender:gender.value,
+        salary:salary.value,
+        city:city.value,
+      }
+      
+      data.push(obj);
+
+      // 录入成功后，表单的选项要恢复到空的时候
+      info.reset();
+      // 录入成功后要渲染一次
+      render();
+    });
+
+    // 因为添加和删除都要重新渲染表格，所以封闭成一个独立的函数
+    function render(){
+      // 要data数组里的学生对象的信息，显示出来，最终要以tr的格式显示，这个操作称为渲染
+
+      // 先清空一下tbody
+      tbody.innerHTML='';
+
+      for(let i=0;i<data.length;i++){
+        let stu = data[i];
+        // 将学生对象，变成tr的格式
+        let trStr = `
+        <tr>
+           <td>${data[i].stuId}</td>
+           <td>${data[i].uname}</td>
+           <td>${data[i].age}</td>
+           <td>${data[i].gender}</td>
+           <td>${data[i].salary}</td>
+           <td>${data[i].city}</td>
+           <td>
+             <a href="javascript:" data-id = ${i}>删除</a>
+           </td>
+        </tr> `;
+        // 创建tr节点
+        let tr = document.createElement('tr');
+        tr.innerHTML = trStr;
+        // 将这个创建好的tr节点，追加到tbody
+        // tbody.appendChild(tr);
+        // 反过来加入
+        tbody.insertBefore(tr,tbody.children[0]);
+      }
+    }
+
+    // 删除功能
+    tbody.addEventListener('click',function(e){
+      // e.target
+      if(e.target.tagName === 'A'){
+        let id = e.target.dataset.id;
+        data.splice(id,1);
+        // 删除后要渲染一次表格
+        render();
+      }
+    })
+  </script>
+</body>
+</html>
+```
+
+css 样式
+
+```css
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color:#721c24;
+}
+h1 {
+  text-align: center;
+  color:#333;
+  margin: 20px 0;
+ 
+}
+table {
+  margin:0 auto;
+  width: 800px;
+  border-collapse: collapse;
+  color:#004085;
+}
+th {
+  padding: 10px;
+  background: #cfe5ff;
+  
+  font-size: 20px;
+  font-weight: 400;
+}
+td,th {
+  border:1px solid #b8daff;
+}
+td {
+  padding:10px;
+  color:#666;
+  text-align: center;
+  font-size: 16px;
+}
+tbody tr {
+  background: #fff;
+}
+tbody tr:hover {
+  background: #e1ecf8;
+}
+.info {
+  width: 900px;
+  margin: 50px auto;
+  text-align: center;
+}
+.info  input, .info select {
+  width: 80px;
+  height: 27px;
+  outline: none;
+  border-radius: 5px;
+  border:1px solid #b8daff;
+  padding-left: 5px;
+  box-sizing: border-box;
+  margin-right: 15px;
+}
+.info button {
+  width: 60px;
+  height: 27px;
+  background-color: #004085;
+  outline: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.info .age {
+  width: 50px;
+}
+```
+
+### 重构
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>学车在线首页</title>
+    <link rel="stylesheet" href="./css/style.css">
+    <style>
+
+    </style>
+</head>
+
+<body>
+    <!-- 4. box核心内容区域开始 -->
+    <div class="box w">
+        <div class="box-hd">
+            <h3>精品推荐</h3>
+            <a href="#">查看全部</a>
+        </div>
+        <div class="box-bd">
+            <ul class="clearfix">
+                <!-- <li>
+                    <a href="#">
+                        <img src="images/course01.png">
+                        <h4>Think PHP 5.0 博客系统实战项目演练</h4>
+                        <div class="info">
+                            <span>高级</span> • <span>1125</span>人在学习
+                        </div>
+                    </a>
+                </li> -->
+            </ul>
+        </div>
+    </div>
+    <script>
+        // 1. 重构  
+        let data = [
+            {
+                src: 'images/course01.png',
+                title: 'Think PHP 5.0 博客系统实战项目演练',
+                num: 1125
+            },
+            {
+                src: 'images/course02.png',
+                title: 'Android 网络动态图片加载实战',
+                num: 357
+            },
+            {
+                src: 'images/course03.png',
+                title: 'Angular2 大前端商城实战项目演练',
+                num: 22250
+            },
+            {
+                src: 'images/course04.png',
+                title: 'Android APP 实战项目演练',
+                num: 389
+            },
+            {
+                src: 'images/course05.png',
+                title: 'UGUI 源码深度分析案例',
+                num: 124
+            },
+            {
+                src: 'images/course06.png',
+                title: 'Kami2首页界面切换效果实战演练',
+                num: 432
+            },
+            {
+                src: 'images/course07.png',
+                title: 'UNITY 从入门到精通实战案例',
+                num: 888
+            },
+            {
+                src: 'images/course08.png',
+                title: 'Cocos 深度学习你不会错过的实战',
+                num: 590
+            },
+        ]
+        
+        for(let i=0;i<data.length;i++){
+            let li = document.createElement('li');
+            li.innerHTML=` <a href="#">
+                        <img src=${data[i].src}>
+                        <h4>${data[i].title}</h4>
+                        <div class="info">
+                            <span>高级</span> • <span>${data[i].num}</span>人在学习
+                        </div>
+                    </a>`
+            document.querySelector('.clearfix').appendChild(li);       
+        }
+    </script>
+</body>
+
+</html>
+```
+
+css 样式
+
+```css
+* {
+    margin: 0;
+    padding: 0;
+}
+.w {
+    width: 1200px;
+    margin: auto;
+}
+body {
+    background-color: #f3f5f7;
+}
+li {
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+.clearfix:before,.clearfix:after {
+    content:"";
+    display:table; 
+  }
+  .clearfix:after {
+    clear:both;
+  }
+  .clearfix {
+     *zoom:1;
+  }   
+ 
+
+.box {
+    margin-top: 30px;
+}
+.box-hd {
+    height: 45px;
+}
+.box-hd h3 {
+    float: left;
+    font-size: 20px;
+    color: #494949;
+}
+.box-hd a {
+    float: right;
+    font-size: 12px;
+    color: #a5a5a5;
+    margin-top: 10px;
+    margin-right: 30px;
+}
+/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
+.box-bd ul {
+    width: 1225px;
+}
+.box-bd ul li {
+    position: relative;
+    top: 0;
+    float: left;
+    width: 228px;
+    height: 270px;
+    background-color: #fff;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    transition: all .3s;
+   
+}
+.box-bd ul li a {
+    display: block;
+}
+.box-bd ul li:hover {
+    top: -8px;
+    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
+}
+.box-bd ul li img {
+    width: 100%;
+}
+.box-bd ul li h4 {
+    margin: 20px 20px 20px 25px;
+    font-size: 14px;
+    color: #050505;
+    font-weight: 400;
+}
+.box-bd .info {
+    margin: 0 20px 0 25px;
+    font-size: 12px;
+    color: #999;
+}
+.box-bd .info span {
+    color: #ff7c2d;
+}
+```
\ No newline at end of file
-- 
Gitee


From 0cc84840ec44d21996bbc6f29569f7c6184fe782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Mon, 27 Nov 2023 23:20:07 +0000
Subject: [PATCH 16/17] 11.14
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李舒汶 <3228916049@qq.com>
---
 ...66\350\277\237\345\207\275\346\225\260.md" | 529 ++++++++++++++++++
 1 file changed, 529 insertions(+)
 create mode 100644 "49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md"

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md" "b/49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md"
new file mode 100644
index 0000000..481e93f
--- /dev/null
+++ "b/49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md"	
@@ -0,0 +1,529 @@
+### 延迟函数
+
+```html
+<script>
+    // 延迟函数，等待某个时间后，执行一个回调函数
+    setTimeout(function () {
+      console.log('时间到了')
+    }, 2000)
+
+    // 间歇函数，每隔某个时间，就重复执行一个回调函数，重复执行
+    setInterval(function(){
+      alert(666)
+    },1000)
+  </script>
+```
+
+### 延迟函数的执行顺序
+
+```html
+<script>
+    // 延迟函数的执行时机，请观察以下代码，预测执行的执行  1 2 4 3
+    console.log(1)
+
+    console.log(2)
+
+    // 延迟函数，需要等待，就算是等待0秒，也需要等待
+    // 延迟函数需要其他无等待的代码执行后才会轮到自己
+    setTimeout(function () {
+      console.log(3)
+    }, 0)
+
+    console.log(4);
+
+    // 延迟函数，也有返回值，一个整数编号
+    const id = setTimeout(function () {
+      console.log(3)
+    }, 0)
+    console.log('id'+id); // 2,第2个延迟函数
+
+    // 既然有编号就可以关闭，它不是执行函数
+    clearTimeout(id);
+  </script>
+```
+
+### location 对象
+
+```html
+<script>
+    // location 位置 对象有哪些重要属性和方法
+    // 属性
+    console.dir(location) 
+
+    // 当前浏览器上完整的url(网址).href
+    console.log(location.href)
+    // 当给href属性赋值时，表示跳转到该值对应的地址
+    location.href = 'http://www.baidu.com'
+
+    // host 主机+端口号
+    console.log('主机',location.host)
+
+    // origin 来源，在host基础上加http://
+    console.log('来源',location.origin)
+
+    // pathname 文件路径，不含origin及参数，当前被文件的文件名
+    console.log('文件名',location.pathname)
+
+    // search 参数列表，?号开始的各个参数名及其值
+    console.log('?号后面',location.search)
+
+    // hash 哈希值列表，#号开始的各个哈希值
+    console.log('#号后面',location.hash)
+
+    const reload = document.querySelector('.reload')
+    reload.addEventListener('click', function () {
+      // f5 刷新页面
+      location.reload()
+      // 强制刷新  ctrl+f5
+      location.reload(true)
+    })
+  </script>
+```
+
+### history 对象
+
+```html
+<body>
+  <button>后退</button>
+  <button>前进</button>
+  <script>
+    // history 历史对象，主要关联浏览器地址栏的操作，进行，后退
+    // 主要方法 前进foward()和后退back()一步
+    // 可以指定数量的go() 正数是前进，负数是后退 具体的数字表示层级
+    console.log(history)
+
+    // 后退事件
+    const back = document.querySelector('button:first-child')
+    back.addEventListener('click', function () {
+      // 后退一步
+      // history.back() 只能后退一步
+      // 可以指定步数
+      history.go(-1)
+    })
+
+    // 前进事件
+    const forward = back.nextElementSibling // 后一个兄弟节点
+    forward.addEventListener('click', function () {
+      // 前进一步
+      // history.forward() 只能前进一步
+      history.go(1)
+    })
+  </script>
+</body>
+```
+
+### localStorage 存储
+
+```html
+<body>
+  <script>
+    // 浏览器本地存储localStorage对象，增setItem('键','值'),删removeItem('键')改同增 查getItem('键')的方法
+    // localStorage 本地存储对象，将数据存放到浏览器中，做到刷新，关闭浏览器后，数据不丢失
+    // 数据操作离不开
+
+    // 1. 要存储一个名字  'uname'， 'pink老师'
+    // localStorage.setItem('键'，'值')
+    localStorage.setItem('uname', 'pink老师')
+
+    // 2. 获取方式  都加引号
+    console.log(localStorage.getItem('uname'))
+
+    // 3. 删除本地存储  只删除名字
+    localStorage.removeItem('uname')
+
+    // 4. 改  如果原来有这个键，则是改，如果么有这个键是增
+    localStorage.setItem('uname', 'red老师')
+
+    // 我要存一个年龄
+    // 2. 本地存储只能存储字符串数据类型
+    localStorage.setItem('age', 18)
+    console.log(localStorage.getItem('age'))
+
+    // 开发用到数组
+    const stu = {
+      uname: 'pink老师',
+      age: 18,
+      gender: '女'
+    }
+    localStorage.setItem('student',stu)
+    console.log(localStorage.getItem('student'))
+
+    // 因为只能存字符串，所以只能将复杂类型的对象转成字符串
+    // json格式，可以将要存入的数据
+    const jsonStr = JSON.stringify(stu);
+    console.log(jsonStr); // uname: 'pink老师', age: 18 , gender: '女'
+    localStorage.setItem('student',jsonStr)
+
+    // 取出刚存的复杂对象
+    let student = localStorage.getItem('student');
+    // 还要把字符串，还原成js对象
+    student = JSON.parse(student)
+    console.log(student)
+    console.log(typeof student);
+  </script>
+</body>
+```
+
+### 本地存储复杂数据类型
+
+```html
+<body>
+  <script>
+    const obj = {
+      uname: 'pink老师',
+      age: 18,
+      gender: '女'
+    }
+
+    // 1.复杂数据类型存储必须转换为 JSON字符串存储
+    const objJson = JSON.stringify(obj)
+    localStorage.setItem('objJson',objJson)
+
+    // 取
+    const obj2 = localStorage.getItem('objJson')
+
+    // JSON 对象  属性和值有引号，而是引号统一是双引号 {"uname":"pink老师","age":18,"gender":"女"}
+    // 2. 把JSON字符串转换为 对象
+    const obj3 = JSON.parse(obj2)
+    console.log(obj3)
+
+  </script>
+</body>
+```
+
+### 数组map方法
+
+```html
+ <script>
+    const arr = ['red', 'blue', 'green']
+    // map 方法也是遍历  处理数据  可以返回一个数组
+    const newArr = arr.map(function (item, i) {
+      // console.log(item)  // 数组元素  'red'
+      // console.log(i)  // 下标
+      return item + '老师'
+    })
+    console.log(newArr)
+
+
+    // ['red老师', 'blue老师', 'green老师']
+
+    // 每个数+10
+    const arr1 = [10, 20, 30]
+    const newArr1 = arr1.map(function (item) {
+      return item + 10
+    })
+    console.log(newArr1)
+  </script>
+```
+
+### 数组的join方法
+
+```html
+<script>
+    const arr = ['red', 'blue', 'green']
+    // 把数组元素转换为字符串 concat 得到一字符串
+    console.log(arr.join('*')) 
+    console.log(arr.join('')) // 直接拼接
+  </script>
+```
+
+### 5秒自动关闭的广告
+
+```html
+ <style>
+    img {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+    }
+ </style>
+ <body>
+  <img src="./images/ad.png" alt="">
+  <script>
+    // 1.获取元素
+    const img = document.querySelector('img')
+    // 5秒后关闭广告
+    setTimeout(function () {
+      // 关闭广告
+      img.style.display = 'none'
+    }, 5000)
+  </script>
+</body>
+```
+
+### 5秒钟之后自动跳转页面
+
+```html
+<style>
+    span {
+      color: red;
+    }
+</style>
+<body>
+  <a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a>
+  <script>
+    // 1. 获取元素
+    const a = document.querySelector('a')
+    // 2.开启定时器
+    // 3. 声明倒计时变量
+    let num = 5
+    let timerId = setInterval(function () {
+      num--
+      a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`
+      // 如果num === 0 则停止定时器，并且完成跳转功能
+      if (num === 0) {
+        clearInterval(timerId)
+        // 4. 跳转  location.href
+        location.href = 'http://www.itcast.cn'
+      }
+    }, 1000)
+  </script>
+</body>
+```
+
+### 自动跳转到移动端
+
+```html
+<script>
+    console.log(navigator.userAgent) // navigator 浏览器本身的所有信息 userAgent 浏览器的版本和平台信息
+    // 检测 userAgent（浏览器信息）
+    !(function () {
+      const userAgent = navigator.userAgent
+      // 验证是否为Android或iPhone
+      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/) // 正则匹配的结果是布尔值
+      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
+      // 如果是Android或iPhone，则跳转至移动站点
+      if(iphone){
+        alert('苹果')
+      }else if(android){
+        alert('安卓')
+      }else{
+        alert('其他')
+      }
+    })();
+</script>
+```
+
+### 学生信息表案例
+
+```html
+<body>
+  <h1>新增学员</h1>
+  <form class="info" autocomplete="off">
+    姓名：<input type="text" class="uname" name="uname" />
+    年龄：<input type="text" class="age" name="age" />
+    性别:
+    <select name="gender" class="gender">
+      <option value="男">男</option>
+      <option value="女">女</option>
+    </select>
+    薪资：<input type="text" class="salary" name="salary" />
+    就业城市：<select name="city" class="city">
+      <option value="北京">北京</option>
+      <option value="上海">上海</option>
+      <option value="广州">广州</option>
+      <option value="深圳">深圳</option>
+      <option value="曹县">曹县</option>
+    </select>
+    <button class="add">录入</button>
+  </form>
+
+  <h1>就业榜</h1>
+  <table>
+    <thead>
+      <tr>
+        <th>学号</th>
+        <th>姓名</th>
+        <th>年龄</th>
+        <th>性别</th>
+        <th>薪资</th>
+        <th>就业城市</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- 
+        <tr>
+          <td>1001</td>
+          <td>欧阳霸天</td>
+          <td>19</td>
+          <td>男</td>
+          <td>15000</td>
+          <td>上海</td>
+          <td>
+            <a href="javascript:">删除</a>
+          </td>
+        </tr> 
+        -->
+    </tbody>
+  </table>
+  <script>
+    // 1. 读取本地存储的数据   student-data  本地存储的命名
+    const data = localStorage.getItem('student-data')
+    // console.log(data)
+    // 2. 如果有就返回对象，没有就声明一个空的数组  arr 一会渲染的时候用的
+    const arr = data ? JSON.parse(data) : []
+
+    // console.log(arr)
+    // 获取 tbody
+    const tbody = document.querySelector('tbody')
+    // 3. 渲染模块函数
+    function render() {
+      // 遍历数组 arr，有几个对象就生成几个 tr，然后追击给tbody
+      // map 返回的是个数组  [tr, tr]
+      const trArr = arr.map(function (item, i) {
+        // console.log(item)
+        // console.log(item.uname)  // 欧阳霸天
+        return `
+        <tr>
+          <td>${item.stuId}</td>
+          <td>${item.uname}</td>
+          <td>${item.age}</td>
+          <td>${item.gender}</td>
+          <td>${item.salary}</td>
+          <td>${item.city}</td>
+          <td>
+            <a href="javascript:" data-id=${i}>删除</a>
+          </td>
+        </tr> 
+        `
+      })
+      // console.log(trArr)
+      // 追加给tbody
+      // 因为 trArr 是个数组， 我们不要数组，我们要的是 tr的字符串 join()
+      tbody.innerHTML = trArr.join('')
+    }
+    render()
+
+
+    // 4. 录入模块
+    const info = document.querySelector('.info')
+    // 获取表单form 里面带有 name属性的元素
+    const items = info.querySelectorAll('[name]')
+    // console.log(items)
+    info.addEventListener('submit', function (e) {
+      // 阻止提交
+      e.preventDefault()
+      // 声明空的对象
+      const obj = {}
+      // obj.stuId = arr.length + 1
+      // 加入有2条数据   2 
+      obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
+      // 非空判断
+      for (let i = 0; i < items.length; i++) {
+        // console.log(items) // 数组里面包含 5个表单  name
+        // console.log(items[i]) //  每一个表单 对象
+        // console.log(items[i].name) //  
+        // item 是每一个表单
+        const item = items[i]
+        if (items[i].value === '') {
+          return alert('输入内容不能为空')
+        }
+        // console.log(item.name)  uname  age gender
+        // obj[item.name]   === obj.uname  obj.age 
+        obj[item.name] = item.value
+      }
+      // console.log(obj)
+      // 追加给数组
+      arr.push(obj)
+      //  把数组 arr 存储到本地存储里面
+      localStorage.setItem('student-data', JSON.stringify(arr))
+      // 渲染页面
+      render()
+      // 重置表单
+      this.reset()
+    })
+
+
+    // 5. 删除模块
+    tbody.addEventListener('click', function (e) {
+      if (e.target.tagName === 'A') {
+        // alert(1)
+        // console.log(e.target.dataset.id)
+        // 删除数组对应的这个数据
+        arr.splice(e.target.dataset.id, 1)
+        // 写入本地存储
+        localStorage.setItem('student-data', JSON.stringify(arr))
+        // 重新渲染
+        render()
+      }
+    })
+  </script>
+</body>
+```
+
+css 样式
+
+```css
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color:#721c24;
+}
+h1 {
+  text-align: center;
+  color:#333;
+  margin: 20px 0;
+
+}
+table {
+  margin:0 auto;
+  width: 800px;
+  border-collapse: collapse;
+  color:#004085;
+}
+th {
+  padding: 10px;
+  background: #cfe5ff;
+
+  font-size: 20px;
+  font-weight: 400;
+}
+td,th {
+  border:1px solid #b8daff;
+}
+td {
+  padding:10px;
+  color:#666;
+  text-align: center;
+  font-size: 16px;
+}
+tbody tr {
+  background: #fff;
+}
+tbody tr:hover {
+  background: #e1ecf8;
+}
+.info {
+  width: 900px;
+  margin: 50px auto;
+  text-align: center;
+}
+.info  input, .info select {
+  width: 80px;
+  height: 27px;
+  outline: none;
+  border-radius: 5px;
+  border:1px solid #b8daff;
+  padding-left: 5px;
+  box-sizing: border-box;
+  margin-right: 15px;
+}
+.info button {
+  width: 60px;
+  height: 27px;
+  background-color: #004085;
+  outline: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.info .age {
+  width: 50px;
+}
+```
-- 
Gitee


From cd09dd062a3388f02ce8e11a51339d45a50b6f50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6?= <3228916049@qq.com>
Date: Mon, 27 Nov 2023 23:27:42 +0000
Subject: [PATCH 17/17] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2049=20?=
 =?UTF-8?q?=E6=9D=8E=E8=88=92=E6=B1=B6/11.24=E5=BB=B6=E8=BF=9F=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0.md=20=E4=B8=BA=2049=20=E6=9D=8E=E8=88=92=E6=B1=B6/202?=
 =?UTF-8?q?31124=E5=BB=B6=E8=BF=9F=E5=87=BD=E6=95=B0.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231124\345\273\266\350\277\237\345\207\275\346\225\260.md"  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md" => "49 \346\235\216\350\210\222\346\261\266/20231124\345\273\266\350\277\237\345\207\275\346\225\260.md" (100%)

diff --git "a/49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md" "b/49 \346\235\216\350\210\222\346\261\266/20231124\345\273\266\350\277\237\345\207\275\346\225\260.md"
similarity index 100%
rename from "49 \346\235\216\350\210\222\346\261\266/11.24\345\273\266\350\277\237\345\207\275\346\225\260.md"
rename to "49 \346\235\216\350\210\222\346\261\266/20231124\345\273\266\350\277\237\345\207\275\346\225\260.md"
-- 
Gitee