From ccd502c938e11bb5adad58f6dac41d3ed7f4c6c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B9=90=E5=90=89=E4=BD=B3?= <3570974289@qq.com>
Date: Thu, 21 Nov 2024 19:47:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...15\344\275\234\347\254\224\350\256\260.md" | 330 ++++++++++++++++++
 ...\346\234\237\345\257\271\350\261\241.html" |  31 ++
 ...\350\261\241\346\226\271\346\263\225.html" |  45 +++
 ...\347\232\204\346\227\266\351\227\264.html" |  44 +++
 ...\344\270\252\345\206\231\346\263\225.html" |  45 +++
 ...\346\227\266\351\227\264\346\210\263.html" |  27 ++
 ...\345\200\222\350\256\241\346\227\266.html" | 155 ++++++++
 7 files changed, 677 insertions(+)
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html"
 create mode 100644 "\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html"

diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..88e0d56
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md"
@@ -0,0 +1,330 @@
+# Web APIs - 第4天
+
+> 进一步学习 DOM 相关知识，实现可交互的网页特效
+
+- 能够插入、删除和替换元素节点
+- 能够依据元素节点关系查找节点
+
+## 日期对象
+
+
+掌握 Date 日期对象的使用，动态获取当前计算机的时间。
+
+
+ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
+
+### 实例化
+
+~~~javascript
+  // 1. 实例化
+  // const date = new Date(); // 系统默认时间
+  const date = new Date('2020-05-01') // 指定时间
+  // date 变量即所谓的时间对象
+
+  console.log(typeof date)
+
+
+
+~~~
+
+### 方法
+
+
+
+ ~~~javascript
+   // 1. 实例化
+  const date = new Date();
+  // 2. 调用时间对象方法
+  // 通过方法分别获取年、月、日，时、分、秒
+  const year = date.getFullYear(); // 四位年份
+  const month = date.getMonth(); // 0 ~ 11
+ ~~~
+
+
+getFullYear 获取四位年份
+
+getMonth 获取月份，取值为 0 ~ 11
+
+getDate 获取月份中的每一天，不同月份取值也不相同
+
+getDay 获取星期，取值为 0 ~ 6
+
+getHours 获取小时，取值为 0 ~ 23
+
+getMinutes 获取分钟，取值为 0 ~ 59
+
+getSeconds 获取秒，取值为 0 ~ 59
+
+### 时间戳
+
+时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
+
+注：ECMAScript 中时间戳是以毫秒计的。
+
+~~~javascript
+    // 1. 实例化
+  const date = new Date()
+  // 2. 获取时间戳
+  console.log(date.getTime())
+// 还有一种获取时间戳的方法
+  console.log(+new Date())
+  // 还有一种获取时间戳的方法
+  console.log(Date.now())
+
+~~~
+
+
+获取时间戳的方法，分别为 getTime 和 Date.now 和  +new Date()
+
+## DOM 节点
+
+> 掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点
+
+回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。
+
+### 插入节点
+
+在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。
+
+如下代码演示：
+
+```html
+<body>
+  <h3>插入节点</h3>
+  <p>在现有 dom 结构基础上插入新的元素节点</p>
+  <hr>
+  <!-- 普通盒子 -->
+  <div class="box"></div>
+  <!-- 点击按钮向 box 盒子插入节点 -->
+  <button class="btn">插入节点</button>
+  <script>
+    // 点击按钮，在网页中插入节点
+    const btn = document.querySelector('.btn')
+    btn.addEventListener('click', function () {
+      // 1. 获得一个 DOM 元素节点
+      const p = document.createElement('p')
+      p.innerText = '创建的新的p标签'
+      p.className = 'info'
+      
+      // 复制原有的 DOM 节点
+      const p2 = document.querySelector('p').cloneNode(true)
+      p2.style.color = 'red'
+
+      // 2. 插入盒子 box 盒子
+      document.querySelector('.box').appendChild(p)
+      document.querySelector('.box').appendChild(p2)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `createElement` 动态创建任意 DOM 节点
+
+- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
+
+- `appendChild` 在末尾（结束标签前）插入节点
+
+再来看另一种情形的代码演示：
+
+```html
+<body>
+  <h3>插入节点</h3>
+  <p>在现有 dom 结构基础上插入新的元素节点</p>
+	<hr>
+  <button class="btn1">在任意节点前插入</button>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript</li>
+  </ul>
+  <script>
+    // 点击按钮，在已有 DOM 中插入新节点
+    const btn1 = document.querySelector('.btn1')
+    btn1.addEventListener('click', function () {
+
+      // 第 2 个 li 元素
+      const relative = document.querySelector('li:nth-child(2)')
+
+      // 1. 动态创建新的节点
+      const li1 = document.createElement('li')
+      li1.style.color = 'red'
+      li1.innerText = 'Web APIs'
+
+      // 复制现有的节点
+      const li2 = document.querySelector('li:first-child').cloneNode(true)
+      li2.style.color = 'blue'
+
+      // 2. 在 relative 节点前插入
+      document.querySelector('ul').insertBefore(li1, relative)
+      document.querySelector('ul').insertBefore(li2, relative)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `createElement` 动态创建任意 DOM 节点
+
+- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
+
+- `insertBefore` 在父节点中任意子节点之前插入新节点
+
+### 删除节点
+
+删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
+
+```html
+<body>
+  <!-- 点击按钮删除节点 -->
+  <button>删除节点</button>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>Web APIs</li>
+  </ul>
+
+  <script>
+    const btn = document.querySelector('button')
+    btn.addEventListener('click', function () {
+      // 获取 ul 父节点
+      let ul = document.querySelector('ul')
+      // 待删除的子节点
+      let lis = document.querySelectorAll('li')
+
+      // 删除节点
+      ul.removeChild(lis[0])
+    })
+  </script>
+</body>
+```
+
+结论：`removeChild` 删除节点时一定是由父子关系。
+
+### 查找节点
+
+DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
+
+#### 父子关系
+
+```html
+<body>
+  <button class="btn1">所有的子节点</button>
+  <!-- 获取 ul 的子节点 -->
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript 基础</li>
+    <li>Web APIs</li>
+  </ul>
+  <script>
+    const btn1 = document.querySelector('.btn1')
+    btn1.addEventListener('click', function () {
+      // 父节点
+      const ul = document.querySelector('ul')
+
+      // 所有的子节点
+      console.log(ul.childNodes)
+      // 只包含元素子节点
+      console.log(ul.children)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `childNodes` 获取全部的子节点，回车换行会被认为是空白文本节点
+- `children` 只获取元素类型节点
+
+```html
+<body>
+  <table>
+    <tr>
+      <td width="60">序号</td>
+      <td>课程名</td>
+      <td>难度</td>
+      <td width="80">操作</td>
+    </tr>
+    <tr>
+      <td>1</td>
+      <td><span>HTML</span></td>
+      <td>初级</td>
+      <td><button>变色</button></td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td><span>CSS</span></td>
+      <td>初级</td>
+      <td><button>变色</button></td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td><span>Web APIs</span></td>
+      <td>中级</td>
+      <td><button>变色</button></td>
+    </tr>
+  </table>
+  <script>
+    // 获取所有 button 节点，并添加事件监听
+    const buttons = document.querySelectorAll('table button')
+    for(let i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', function () {
+        // console.log(this.parentNode); // 父节点 td
+        // console.log(this.parentNode.parentNode); // 爷爷节点 tr
+        this.parentNode.parentNode.style.color = 'red'
+      })
+    }
+  </script>
+</body>
+```
+
+结论：`parentNode` 获取父节点，以相对位置查找节点，实际应用中非常灵活。
+
+#### 兄弟关系
+
+```html
+<body>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript 基础</li>
+    <li>Web APIs</li>
+  </ul>
+  <script>
+    // 获取所有 li 节点
+    const lis = document.querySelectorAll('ul li')
+
+    // 对所有的 li 节点添加事件监听
+    for(let i = 0; i < lis.length; i++) {
+      lis[i].addEventListener('click', function () {
+        // 前一个节点
+        console.log(this.previousSibling)
+        // 下一下节点
+        console.log(this.nextSibling)
+      })
+    }
+  </script>
+</body>
+```
+
+结论：
+
+- `previousSibling` 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
+- `nextSibling` 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html"
new file mode 100644
index 0000000..3a5fa38
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html"
@@ -0,0 +1,31 @@
+<!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>
+  <button></button>
+  <script>
+    // 实例化  new 
+
+    // 1. 得到当前时间 
+    const date = new Dae();
+    console.log(date);
+    console.log(typeof date);
+
+    // 2. 指定时间 2025-11-12 09:30:00
+   const date1 = new Date('2025-11-12 09:30:00')
+   console.log(date1);
+
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html"
new file mode 100644
index 0000000..e11689d
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html"
@@ -0,0 +1,45 @@
+<!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>
+  <script>
+    // 获得日期对象
+     const date = new Date()
+    // 使用里面的方法
+
+    // 年
+    console.log(date.getFullYear());
+    // 月  从0-11
+    console.log(date.getMonth());
+    // 日
+    console.log(date.getDate());
+
+    // 时
+    console.log(date.getHours());
+
+    // 分
+    console.log(date.getMinutes());
+
+    // 秒
+    console.log(date.getSeconds());
+
+    // 星期几 ，第一天是星期几？
+    console.log(date.getDate());
+
+
+
+
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html"
new file mode 100644
index 0000000..6058079
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html"
@@ -0,0 +1,44 @@
+<!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>
+  <style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid rgb(255, 192, 200);
+      text-align: center;
+      line-height: 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div></div>
+
+  <script>
+
+
+    // 实现电子时间效果，在div里显示 现在是2024年11月21日 10:12:07 格式的时间
+    function getTime() {
+      const date = new Date();
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      const day = date.getUTCDate();
+      const h = date.getHours();
+      const m = date.getMinutes();
+      const s = date.getSeconds();
+      let str = `现在是${year}年${month}月${day}日${h}:${m}:${s}`
+      document.querySelector('div').innerHTML = str;
+    }
+    getTime()
+    setInterval(getTime, 1000)
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html"
new file mode 100644
index 0000000..ca8cf72
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html"
@@ -0,0 +1,45 @@
+<!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>
+  <style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid pink;
+      text-align: center;
+      line-height: 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div></div>
+  <script>
+    // const div = document.querySelector('div')
+    // // 得到日期对象
+    // const date = new Date()
+    // // 将日期对象 本地化
+    // // 1. 完整的日期+时间  date.toLocaleString()      // 2022/4/1 09:41:21
+    // // 2. 只有日期        date.toLocaleDateString()  // 2022/4/1
+    // // 3. 只有时间        date.toLocaleTimeString()  // 16:57:40
+    // div.innerHTML = date.toLocaleString()
+    // setInterval(function () {
+    //   const date = new Date()
+    //   div.innerHTML = date.toLocaleString()
+
+    // }, 1000)
+
+    const date = new Date();
+
+    const div = document.querySelector('div')
+    div, innerHTML = date.toLocaleTimeString();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html"
new file mode 100644
index 0000000..a558601
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html"
@@ -0,0 +1,27 @@
+<!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>
+  <script>
+    // 时间戳，一种特殊的时间计量方式，一串整数的数字
+    // 1970.01.01 0:0:0  1970年Unix版本发布，1970是纪元时间
+    // 时间戳，通常用来做时间比较的差值
+
+    // 3种获取方式 get + Date
+const date = new Date();
+console.log(date.getTime()/1000);
+console.log(+new Date());
+console.log(Date.now());
+console.log(typeof Date.now());
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html" "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html"
new file mode 100644
index 0000000..4a62da4
--- /dev/null
+++ "b/\344\271\220\345\220\211\344\275\263/20241121\346\227\266\351\227\264\344\270\216\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html"
@@ -0,0 +1,155 @@
+<!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>
+  <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>
+</head>
+
+<body>
+  <div class="countdown">
+    <p class="next">今天是11月21日<span>星期六</span></p>
+    <p class="title">下课倒计时</p>
+    <p class="clock">
+      <span id="hour">00</span>
+      <i>:</i>
+      <span id="minutes">25</span>
+      <i>:</i>
+      <span id="scond">20</span>
+    </p>
+    <p class="tips">17:40:00下课</p>
+  </div>
+  <script>
+    // 做倒计时要有两个时间 未来时间A 现在时间B A-B就是时间差 ，毫秒的差，转成时分秒
+
+
+    // 随机颜色函数
+    // 1. 自定义一个随机颜色函数 #00FF00 rgb(255,255,255)
+    // a.style.color = '#FFFF00'  // 三原色 Red Green Blue   0-F 的6位数
+    // a.style.color = 'rgb(255,0,0)'  // 三原色 Red Green Blue   rgb(255,0,0)  0-255
+    function col(rgb) {
+      if (rgb) {
+        let r=Math.floor(Math.random()*256)
+        let g=Math.floor(Math.random()*256)
+        let b=Math.floor(Math.random()*256)
+        return `rgb(${r},${g},${b})`
+      }else{
+        let arr=[1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
+        let n='#'
+        for (let i = 0; i < 6; i++) {
+          n+=arr[i]
+          
+        }
+        return n
+      }
+    }
+
+    let div=document.querySelector('.countdown')
+    
+
+    
+    function name() {
+    let data=new Date()
+    let last=new Date('2024-11-21 17:40:00')
+    // console.log(parseInt((last-data)/1000/3600));
+    // console.log(parseInt(((last-data)/1000)/60%60));
+    // console.log(parseInt((last-data)/1000%60));
+
+    let num=(last-data)/1000
+    
+    let h=parseInt(num/3600)
+    let m=parseInt(num/60%60)
+    let s=parseInt(num%60)
+
+    document.querySelector('#hour').innerHTML=h<10?'0'+h:h
+    document.querySelector('#minutes').innerHTML=m<10?'0'+m:m
+    document.querySelector('#scond').innerHTML=s<10?'0'+s:s
+    let arr=['星期日','星期一'	,'星期二'	,"星期三"	,'星期四'	,'星期五'	,'星期六'	]
+    document.querySelector('.next span').innerHTML=arr[data.getDay()]
+    div.style.backgroundColor=col(true)
+    }
+
+    name()
+    setInterval(name,1000)
+
+    
+    
+
+    // 页面刷新随机得到颜色
+
+    // 修改星期
+
+    
+
+    // 函数封装 getCountTime
+
+    
+   // 让倒计时生效
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee