From 8908f7d44f16d3acdf818f8e55694a13f3e476e3 Mon Sep 17 00:00:00 2001
From: seele <3412896462@qq.com>
Date: Sun, 14 Dec 2025 14:01:14 +0000
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

Signed-off-by: seele <3412896462@qq.com>
---
 .../20251208.md"                              |   9 +
 .../20251210.md"                              | 230 ++++++++++++++++++
 .../20251211.md"                              | 172 +++++++++++++
 .../20251212.md"                              |  20 ++
 4 files changed, 431 insertions(+)
 create mode 100644 "\345\220\225\347\245\245\345\213\207/20251208.md"
 create mode 100644 "\345\220\225\347\245\245\345\213\207/20251210.md"
 create mode 100644 "\345\220\225\347\245\245\345\213\207/20251211.md"
 create mode 100644 "\345\220\225\347\245\245\345\213\207/20251212.md"

diff --git "a/\345\220\225\347\245\245\345\213\207/20251208.md" "b/\345\220\225\347\245\245\345\213\207/20251208.md"
new file mode 100644
index 00000000..d8eb646c
--- /dev/null
+++ "b/\345\220\225\347\245\245\345\213\207/20251208.md"
@@ -0,0 +1,9 @@
+## 笔记
+
+location方法：
+assign（）：跳转新页面
+reload（）：重新载入当前页面
+history方法：
+back（）:退回前一页
+forward（）：重新进入下一页
+go（）：进入指定的网友
\ No newline at end of file
diff --git "a/\345\220\225\347\245\245\345\213\207/20251210.md" "b/\345\220\225\347\245\245\345\213\207/20251210.md"
new file mode 100644
index 00000000..f23311f1
--- /dev/null
+++ "b/\345\220\225\347\245\245\345\213\207/20251210.md"
@@ -0,0 +1,230 @@
+## 作业
+
+<div id="text">
+    <p>此情可待成追忆</p>
+    <p>只是当时已惘然</p>
+</div>
+    <input type="button"  id="enlargeBtn" value="变大且随机颜色">
+    <script>
+        // 初始化变量
+        let fontSize = 16; // 初始字体大小
+        let textEle = document.getElementById('text');
+        let btnEle = document.getElementById('enlargeBtn');
+
+        //  放大文本并设置随机颜色
+        function enlargeText() {
+            // 增大2像素
+            fontSize += 2;
+            textEle.style.fontSize = `${fontSize}px`;
+
+            let r = Math.floor(Math.random() * 256);
+            let g = Math.floor(Math.random() * 256);
+            let b = Math.floor(Math.random() * 256);
+            textEle.style.color = `rgb(${r}, ${g}, ${b})`;
+        }
+
+        btnEle.onclick = enlargeText;
+    </script>
+    <style>
+        #targetImg {
+            width: 500px;
+            height: 500px;
+            object-fit: cover;
+        }
+    </style>
+    <img id="targetImg" src="./2.jpeg" alt="丁禹兮">
+
+    <script>
+        let imgEle = document.getElementById('targetImg');
+        // 鼠标移入添加边框
+        function addBorder() {
+            // 设置5px 双实线 边框
+            imgEle.style.border = '5px double green';
+        }
+
+        // 鼠标移出移除边框
+        function removeBorder() {
+            imgEle.style.border = 'none';
+        }
+        // 绑定鼠标移入/移出事件
+        imgEle.onmouseover = addBorder; // 移入触发
+        imgEle.onmouseout = removeBorder; // 移出触发
+    </script>
+
+    <ul class="nav" id="navContainer">
+        <li class="nav-item">
+            <div class="main-title">产品管理</div>
+            <ul class="menu-items">
+                <li>添加产品</li>
+                <li>编辑产品</li>
+                <li>删除产品</li>
+            </ul>
+        </li>
+        <li class="nav-item">
+            <div class="main-title">订单管理</div>
+            <ul class="menu-items">
+                <li>待付款订单</li>
+                <li>已完成订单</li>
+            </ul>
+        </li>
+    </ul>
+
+    <style>
+        .nav {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            width: 260px;
+        }
+        .nav-item {
+            margin: 2px 0;
+            /* 主菜单间距，避免垂直重叠 */
+            cursor: pointer;
+        }
+        .main-title {
+            height: 50px;
+            line-height: 50px;
+            padding-left: 15px;
+            background: #f8f8f8;
+        }
+        .menu-items {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            padding-left: 15px;
+            /* 初始位置 */
+            transition: padding-left 0.3s ease;
+            background: #fff;
+            border-left: 1px solid #eee;
+        }
+
+        .menu-items li {
+            height: 45px;
+            line-height: 45px;
+            padding-left: 5px;
+            /* 子项内间距，避免文字挤边 */
+        }
+    </style>
+
+    <script>
+        let navItems = document.getElementsByClassName('nav-item');
+        let  INIT_PADDING = 15, HOVER_PADDING = 40;
+        //  - 滑入
+        function slideIn() {
+            const items = this.querySelector('.menu-items');
+            if (items) items.style.paddingLeft = `${HOVER_PADDING}px`;
+        }
+        //  - 滑出
+        function slideOut() {
+            const items = this.querySelector('.menu-items');
+            if (items) items.style.paddingLeft = `${INIT_PADDING}px`;
+        }
+        // 绑定事件
+        for (let i = 0; i < navItems.length; i++) {
+            navItems[i].onmouseover = slideIn;
+            navItems[i].onmouseout = slideOut;
+        }
+    </script>
+<style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            min-height: 100vh;
+            background-color: #f5f5f5;
+        }
+
+        .draggable-img {
+            position: absolute;
+            width: 200px;
+            height: auto;
+            cursor: move;
+            /* 禁止图片选中 */
+            user-select: none;
+            transition: transform 0.2s ease;
+            /* 层级，避免图片重叠时被遮挡 */
+            z-index: 10;
+        }
+    </style>
+</head>
+<body>
+    <img src="./xm1.webp" class="draggable-img" >
+    <img src="./xm2.jpg" class="draggable-img" >
+    <img src="./xm3.webp" class="draggable-img" >
+
+    <script>
+        // 获取所有可拖动的图片元素
+        let imgElements = document.querySelectorAll('.draggable-img');
+        
+        // 初始化图片：随机旋转角度 + 初始位置
+        function initImages() {
+            imgElements.forEach(function(img, index) {
+                // 随机旋转角度（-30 到 30 度之间）
+                let rotateDeg = Math.random() * 60 - 30;
+                img.style.transform = `rotate(${rotateDeg}deg)`;
+                
+                // 初始位置：错开排列，避免重叠在一起
+                let initLeft = 50 + index * 220 + 'px';
+                let initTop = 50 + index * 50 + 'px';
+                img.style.left = initLeft;
+                img.style.top = initTop;
+                
+                // 为每张图片绑定拖动事件
+                bindDragEvent(img);
+            });
+        }
+
+        // 绑定拖动事件的传统函数
+        function bindDragEvent(img) {
+            // 声明变量存储拖动时的偏移量
+            let offsetX, offsetY;
+            
+            // 鼠标按下事件（开始拖动）
+            img.addEventListener('mousedown', function(e) {
+                // 阻止默认行为，避免浏览器的默认拖拽
+                e.preventDefault();
+                
+                // 计算鼠标相对于图片左上角的偏移量
+                offsetX = e.clientX - img.offsetLeft;
+                offsetY = e.clientY - img.offsetTop;
+                
+                // 提升当前拖动图片的层级，避免被其他图片遮挡
+                img.style.zIndex = 20;
+                
+                // 鼠标移动事件（拖动过程）
+                document.addEventListener('mousemove', moveHandler);
+                
+                // 鼠标松开事件（结束拖动）
+                document.addEventListener('mouseup', upHandler);
+            });
+
+            // 鼠标移动的处理函数
+            function moveHandler(e) {
+                // 计算图片的新位置：鼠标坐标 - 偏移量
+                let newLeft = e.clientX - offsetX + 'px';
+                let newTop = e.clientY - offsetY + 'px';
+                
+                // 更新图片的left和top属性
+                img.style.left = newLeft;
+                img.style.top = newTop;
+            }
+
+            // 鼠标松开的处理函数
+            function upHandler() {
+                // 移除移动和松开事件，结束拖动
+                document.removeEventListener('mousemove', moveHandler);
+                document.removeEventListener('mouseup', upHandler);
+                
+                // 恢复层级
+                img.style.zIndex = 10;
+            }
+        }
+
+        // 页面加载完成后初始化图片
+        window.onload = function() {
+            initImages();
+        };
+    </script>
\ No newline at end of file
diff --git "a/\345\220\225\347\245\245\345\213\207/20251211.md" "b/\345\220\225\347\245\245\345\213\207/20251211.md"
new file mode 100644
index 00000000..7042012c
--- /dev/null
+++ "b/\345\220\225\347\245\245\345\213\207/20251211.md"
@@ -0,0 +1,172 @@
+## 作业
+
+  <script>
+        function checkTicketCode() {
+            let correctCode = "99632570063166";
+            let inputCode = prompt("请输入电影票兑换码：");
+            if (inputCode === correctCode) {
+                alert("兑换码验证成功！取票成功，祝您观影愉快～");
+                return true;
+            } else {
+                alert("兑换码错误！取票失败，请核对后重新输入。");
+                return false;
+            }
+        }
+        let isSuccess = checkTicketCode();
+        document.writeln("取票结果：", isSuccess ? "成功" : "失败");
+    </script>
+<textarea id="textArea" style="width: 300px; resize: none; overflow: auto;" rows="5">
+           无题·相见时难别亦难
+               李商隐
+    相见时难别亦难，东风无力百花残。
+    春蚕到死丝方尽，蜡炬成灰泪始干。
+    晓镜但愁云鬓改，夜吟应觉月光寒。
+    蓬山此去无多路，青鸟殷勤为探看。
+    </textarea>
+<button onclick="TextAreaHeight('expand')">增高</button>
+<button onclick="TextAreaHeight('shrink')">降低</button>
+<script>
+    function TextAreaHeight(type) {
+        let textArea = document.getElementById('textArea');
+        // 每次调整的步长
+        let step = 50;
+        // 获取当前高度
+        let currentHeight = textArea.offsetHeight;//获取文本框的实际高度
+        // 高度调整逻辑
+        if (type === 'expand') {
+            textArea.style.height = (currentHeight + step) + 'px';
+        } else if (type === 'shrink') {
+            // 限制最小高度，避免缩到看不见
+            let minHeight = 100;
+            textArea.style.height = Math.max(currentHeight - step, minHeight) + 'px';
+        }
+    }
+</script>
+<div>
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 语文
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 数学
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 英语
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 物理
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 化学
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 生物
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 历史
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 地理
+    <input type="checkbox" class="course-checkbox" onclick="checkCourseCount()"> 政治
+  </div>
+
+  <script>
+  function checkCourseCount() {
+    let courseCheckboxes = document.getElementsByClassName('course-checkbox');
+    // 统计已选中的课程数
+    let selectedCount = 0;
+    // 3. 遍历所有复选框，统计选中数量
+    for (let i = 0; i < courseCheckboxes.length; i++) {
+      if (courseCheckboxes[i].checked) { // 复选框被选中时
+        selectedCount++; // 选中数+1
+      }
+    }
+    // 校验逻辑：超过6门时提示，并取消最后一次选中
+    let maxCount = 6; // 最大可选课程数
+    if (selectedCount > maxCount) {
+      alert(`最多只能选${maxCount}门课程！`); 
+      // 取消最后点击的这个复选框
+      event.target.checked = false;
+    }
+  }
+  </script>
+    <div>
+        <input type="radio" name="answer" value="A"> A. 错误答案<br>
+        <input type="radio" name="answer" value="B"> B. 正确答案<br>
+        <input type="radio" name="answer" value="C"> C. 错误答案<br>
+        <button onclick="checkAnswer()">提交</button>
+    </div>
+    <script>
+        function checkAnswer() {
+            let answerOptions = document.getElementsByName('answer');
+            // 存储用户选中的答案
+            let selectedAnswer = null;
+            // 遍历选项，找到用户选中的答案
+            for (let i = 0; i < answerOptions.length; i++) {
+                if (answerOptions[i].checked) {
+                    selectedAnswer = answerOptions[i].value;
+                    break; 
+                }
+            }
+            let correctAnswer = "B"; 
+            if (!selectedAnswer) { // 未选择答案
+                alert("请选择正确答案！");
+            } else if (selectedAnswer === correctAnswer) { 
+                alert("回答正确！");
+            } else {   
+                alert("答案不对，请重新选择！");
+            }
+        }
+    </script>
+    <div>
+        <button onclick="operateHobby('all')">全选</button>
+        <button onclick="operateHobby('none')">全不选</button>
+        <button onclick="operateHobby('reverse')">反选</button>
+        <div style="margin-top: 10px;">
+            <input type="checkbox" class="hobby-checkbox"> 阅读<br>
+            <input type="checkbox" class="hobby-checkbox"> 运动<br>
+            <input type="checkbox" class="hobby-checkbox"> 听歌<br>
+            <input type="checkbox" class="hobby-checkbox"> 摄影<br>
+            <input type="checkbox" class="hobby-checkbox"> 绘画<br>
+        </div>
+    </div>
+    <script>
+        function operateHobby(type) {
+            let hobbyCheckboxes = document.getElementsByClassName('hobby-checkbox');
+            // 遍历所有复选框，根据类型执行对应操作
+            for (let i = 0; i < hobbyCheckboxes.length; i++) {
+                let checkbox = hobbyCheckboxes[i]; // 当前遍历的复选框
+                switch (type) {
+                    case 'all': // 全选：所有复选框设为选中
+                        checkbox.checked = true;
+                        break;
+                    case 'none': // 全不选：所有复选框设为未选中
+                        checkbox.checked = false;
+                        break;
+                    case 'reverse': // 反选：选中变未选，未选变选中
+                        checkbox.checked = !checkbox.checked;
+                        break;
+                }
+            }
+        }
+    </script>
+    <select id="province" onchange="changeCity()">
+        <option value="">请选择省份</option>
+        <option value="bj">北京市</option>
+        <option value="sh">上海市</option>
+        <option value="gd">广东省</option>
+    </select>
+    <select id="city">
+        <option value="">请选择城市</option>
+    </select>
+    <script>
+        let cityData = {
+            "bj": ["北京市"],
+            "sh": ["上海市"],
+            "gd": ["广州市", "深圳市"]
+        };
+        function changeCity() {
+            // 获取省份下拉框和城市下拉框元素
+            let provinceSelect = document.getElementById("province");
+            let citySelect = document.getElementById("city");
+            // 获取当前选中的省份值
+            let selectedProvince = provinceSelect.value;
+            // 清空原有城市选项
+            citySelect.innerHTML = "<option value=''>请选择城市</option>";
+            // 根据选中省份加载对应城市
+            if (selectedProvince) { // 选中了有效省份
+                let cities = cityData[selectedProvince]; // 获取该省的城市列表
+                // 遍历城市列表，添加到城市下拉框
+                for (let i = 0; i < cities.length; i++) {
+                    let option = document.createElement("option"); // 创建新选项
+                    option.value = cities[i]; // 设置选项值
+                    option.textContent = cities[i]; // 设置选项显示文字
+                    citySelect.appendChild(option); // 把选项添加到城市下拉框
+                }
+            }
+        }
+    </script>
\ No newline at end of file
diff --git "a/\345\220\225\347\245\245\345\213\207/20251212.md" "b/\345\220\225\347\245\245\345\213\207/20251212.md"
new file mode 100644
index 00000000..c407c48e
--- /dev/null
+++ "b/\345\220\225\347\245\245\345\213\207/20251212.md"
@@ -0,0 +1,20 @@
+## 笔记
+一、JSON
+
+1. 概念
+- JSON（JavaScript Object Notation）是轻量级的数据交换格式，独立于语言，易读易解析。
+2. 核心方法
+- JSON.parse()：将 JSON 字符串转换为 JavaScript 对象 / 数组，用于处理后端返回的 JSON 数据。
+- 例：const obj = JSON.parse('{"name":"张三","age":20}');
+- JSON.stringify()：将 JavaScript 对象 / 数组转换为 JSON 字符串，用于向后端发送数据。
+- 例：const str = JSON.stringify({name:"张三",age:20});
+3. 注意点
+- 键名必须用双引号包裹，不能用单引号或无引号；
+- 不能包含函数、undefined 等类型，序列化时会被忽略。 二、Fetch API
+4. 概念
+- Fetch API 是现代浏览器提供的异步网络请求接口，替代传统的 XMLHttpRequest，基于 Promise 实现。
+5. 关键要点
+- Fetch 的响应（Response 对象）需要手动解析（json ()/text () 等），这是一个异步操作；
+- 只有网络错误或请求无法完成时才会触发 catch，HTTP 错误（如 404、500）不会直接触发，需通过response.ok判断；
+- 默认不携带 Cookie，若需要则配置credentials: 'include'；
+- 支持 AbortController 中断请求
\ No newline at end of file
-- 
Gitee