<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>备忘录</title><!-- <link rel="stylesheet" href="style.css"> --><style>/* 设置全局样式 */* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;body {background: #0b1b2c;}input,button {color: #d6d301;text-shadow: 1px 1px 1px #100000;font-weight: bold;cursor: pointer;}li {list-style: none;}}/* 设置全局样式 结束*//* 头部区域header */header {width: 100vw;height: 40px;display: flex;justify-content: space-between;align-items: center;background-color: #cbcbcb;&::before {content: "";background-color: #cbcbcb;width: 15px;height: 100%;position: fixed;right: 1px;top: 40px;z-index: 110;}/* logo */figure.logo {width: 190px;height: 50px;/* 缩小 */transform: scale(0.8);margin-top: 2px;margin-left: -15px;border-radius: 50%;background: #f30303;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);z-index: 99;figcaption {background: hsl(0, 0%, 0%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);letter-spacing: -3px;line-height: 45px;border-radius: 50%;font-size: 40px;width: 152px;}.my_name1 {text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);transform: translate(0%, 0%);}.my_name2 {text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);transform: translate(0%, -93%);}img {width: 60px;height: 35px;margin-top: 7px;margin-left: 130px;border-radius: 50%;transition: transform 0.3s ease;position: absolute;&:hover {transform: scale(1.3);filter: drop-shadow(0 0 0.3em #ff0202);}}}/* 时间 */time {background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 1.5rem;font-weight: 900;text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);sub {-webkit-text-fill-color: #cfd601;text-shadow: 1px 1px 1px #100000;font-size: 1rem;}}/* 天气样式无效iframe {font-size: 2rem;color: #f30303;} *//* 全屏还原关闭按钮 */menu {display: flex;button {background: none;border: none;}img {width: 35px;margin-top: 5px;margin-right: 5px;cursor: pointer;&:hover {transform: scale(1.2);padding: 5px;background: #ffd000;}}button:nth-child(2) {display: none;/* 放大镜效果 */transform: scale(1.16);}}}/* 头部区域header 结束 *//* 中间区域main样式 */main {width: 100vw;height: 96vh;position: absolute;top: 4%;display: flex;justify-content: center;/* 左侧导航栏 */aside.aside_left {width: 6vw;height: 96vh;position: relative;section {width: 100%;height: 98%;position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: space-evenly;&::before {content: "";width: 15px;height: 100%;position: absolute;z-index: 120;background-color: #cbcbcb;}article {height: calc(100% / 3.5);width: 320%;position: relative;z-index: 100;transform: translateX(-70%);transition: transform .5s ease-in-out;button {width: 35%;height: 100%;font: 800 80px '';background-color: #cbcbcb;border: none;transition: background-color .5s ease-in-out;box-shadow: 0 0 10px rgb(200, 255, 3);color: rgb(70, 100, 180);&:hover {cursor: pointer;}}p {position: absolute;/* 使用渐变背景*//* background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); *//*将背景剪切成文字的形状*/background-clip: text;-webkit-background-clip: text;/*文字颜色设为透明,使文字与背景融为一体*/-webkit-text-fill-color: transparent;font-size: 90px;font-weight: 900;right: -15px;/* 文本竖排 */writing-mode: vertical-rl;top: calc(50% - 100px);text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);}}article.active {transform: translateX(0);}button.active {color: #feee02d7;}}}/* 左侧导航栏 结束 *//* 滑动栏 */#bar {position: absolute;left: 6vw;height: 98%;width: 2px;z-index: 99;/* background-color: rgb(255, 249, 249); */p {position: absolute;height: calc(100% / 4);width: 10px;top: 0px;left: -1.2px;background: rgb(250, 4, 168);transition: transform .5s ease-in-out;box-shadow:inset 3px 4px 5px rgba(255, 255, 255, 0.6),inset -3px -4px 5px rgba(0, 0, 0, 0.6);border-radius: 10px;&::before {content: "";position: absolute;height: calc(100% / 1);width: 10px;left: -1px;background: rgb(250, 4, 4);transition: transform .5s ease-in-out;border-radius: 10px;box-shadow: 0 0 10px rgb(200, 255, 3);}}}/* 滑动栏 结束*//* 分页设置 */#card-section {height: 100%;width: 90%;overflow: hidden;}/* 分页设置 结束*//* 中间留言区 */table {width: 86vw;margin: 1px 2px;box-shadow: 0 0 10px rgb(200, 255, 3);.titleBtn {display: flex;color: #E6A23C;text-align: center;td {height: 24px;}.displayBtn {background: #0bb811c9;text-shadow: 1px 1px 1px rgb(0, 0, 0);width: 30vw;cursor: pointer;font-weight: bold;&:hover {background-color: #f3d303;color: #ff0505;}}marquee {background: linear-gradient(to right, #4caf4fed, #dc0000cf);color: #f3d303;margin: 0;padding: 0;width: 26vw;height: 24px;}/* 删除按钮 */.deleteBtn {color: #f3d303;text-shadow: 1px 1px 1px rgb(0, 0, 0);background: #ff0000;font-weight: bold;cursor: pointer;width: 30vw;&:hover {background-color: #f3d303;color: #ff0505;}}}}/* 隐藏的输入框*/.myDialog {position: fixed;top: 6vw;left: 10vw;background: #2c3e50;box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);border-radius: 8px;border: 0;.dialog-form {color: azure;box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);display: flex;justify-content: space-between;padding: 5px;cursor: move;button {background: #ff000004;border: none;font-size: 30px;/* 放大镜效果 */transform: scale(1.6);margin: 0 5px;&:hover {background-color: #f30303;width: 30px;height: 28px;border-top-right-radius: 5px;}}}.textarea-form {input[type="file"] {box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);margin: 5px;}sub {color: #ffffff;user-select: text;}section {display: flex;input,button {color: #fffcfc;text-shadow: 1px 1px 1px #000;background: #0bb81186;/* 文本竖排 */writing-mode: vertical-rl;/* 文字间距 */letter-spacing: 20px;font-size: 25px;padding-right: 5px;}textarea {background: #0b1b2c;color: hsla(160, 100%, 37%, 0.63);text-shadow: 1px 1px 1px #0a0000;/* background: #144756bd; */font-size: 1.2rem;&::placeholder {text-align: center;}}}}}/* 隐藏的输入框 结束 *//* 留言列表 */output {border: 2px solid rgb(134, 133, 133);background-color: #144756;width: 85vw;height: 91vh;margin-left: 10px;border-radius: 10px;display: flex;align-content: flex-start;font-size: 20px;flex-wrap: wrap;overflow-x: hidden;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);pre,span {user-select: text;color: hsla(160, 100%, 37%, 0.63);text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);margin: 10px;border-radius: 5px;text-align: center;&:hover {color: #f85f5faf;background-color: #1b657b4b;text-shadow: 1px 1px 1px #030303;box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);border-radius: 10px;}}.href {box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);padding: 2px;border-radius: 3px;}.finish {background-color: rgb(191, 210, 255);color: rgb(255, 250, 250);text-shadow: 1px 1px 1px #030303;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);}a {text-decoration: none;color: #ebf704;}}/* 中间留言区 结束*//* 右侧边栏网站收藏 */aside.aside_right {color: #ffffff;flex-wrap: wrap;overflow-x: hidden;width: 8vw;li {box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);background-color: #f9f9f90c;margin: 5px;padding: 2px;border-radius: 3px;cursor: pointer;&:hover {background-color: #f3d303;}a {font-size: 18px;color: hsla(160, 100%, 37%, 1);text-shadow: 1px 1px 1px #100000;/* 去掉下划线 */text-decoration: none;&:hover {color: #f85f5faf;display: block;transform: scale(1.2);/* 文本居中 */text-align: center;}}}}/* 右侧边栏网站收藏 结束*/}/* 中间区域main样式 结束 *//* 底部footer样式 */footer {background-color: #cbcbcb;width: 100vw;height: 20px;position: fixed;bottom: 0;left: 0;text-align: center;a {color: #d6d301;text-shadow: 1px 1px 1px #100000;font-weight: bold;cursor: pointer;}}/* 底部footer样式 结束 */</style>
</head><body><!-- 头部区域header --><header><!-- logo --><figure class="logo"><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""target="_blank"><img src="file:///D:/img/icon.ico" alt="与妖为邻"></a><figcaption class="my_name1">与妖为邻</figcaption><figcaption class="my_name2">与妖为邻</figcaption></figure><!-- 时间 --><time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time><!-- 天气 --><iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"src="https://i.tianqi.com/?c=code&id=99"></iframe><!-- 全屏还原关闭按钮 --><menu><button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"onclick="fullScreen()"></button><button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"onclick="exitFullScreen()"></button><button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button></menu></header><!-- 头部区域header 结束 --><!-- 中间区域 main --><main><!-- 左侧导航栏 --><aside class="aside_left"><section><article class="active"><button onclick="slideTo(1)" class="active">首页<p>首页</p></button></article><article><button onclick="slideTo(2)">英语<p>英语</p></button></article><article><button onclick="slideTo(3)">音乐<p>音乐</p></button></article><article><button onclick="slideTo(4)">项目<p>项目</p></button></article></section></aside><!-- 左侧导航栏 结束--><!-- 滑动栏 --><article id="bar"><p></p></article><!-- 滑动栏 结束--><!-- 中间留言区 --><section id="card-section"><!-- 第一页:首页 --><article id="card1"><table><tr class="titleBtn"><td class="displayBtn" onclick="myDialog.show()">编辑首页页面按钮</td><td><marquee behavior="alternate" direction="right">首页杂记 </marquee></td><td id="delete1" class="deleteBtn">删除首页页面按钮</td></tr><tr><td><!-- <dialog> 元素的 open 属性设置为 true,表示对话框在页面加载时默认打开 --><!-- <dialog id="myDialog" class="myDialog" open> --><dialog id="myDialog" class="myDialog"><article class="dialog-form" id="Drag"><h2>这是一个弹窗留言输入框</h2> <button onclick="myDialog.close()">×</button></article><form class="textarea-form"><input type="file" name="file1"accept="text/plain, text/css, text/html, text/javascript, text/markdown" /><section><input type="reset" value="重置"><textarea class="textarea1" name="textarea1" rows="18" cols="90%"placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea><button type="button" class="abb-text1">添加</button></section></form></dialog><output id="memo1"></output></td></tr></table></article><!-- 第一页:首页 结束--><!-- 第二页:英语 --><article id="card2"><table><tr class="titleBtn"><td class="displayBtn" onclick="myDialog2.show()">编辑英语页面按钮 </td><td><marquee behavior="alternate" direction="right">英语杂记 </marquee></td><td id="delete2" class="deleteBtn">删除英语页面按钮 </td></tr><tr><td><dialog id="myDialog2" class="myDialog"><form class="dialog-form" method="dialog" id="Drag2"><h2>这是一个弹窗留言输入框</h2> <button>×</button></form><form class="textarea-form"><input type="file" name="file2"accept="text/plain, text/css, text/html, text/javascript, text/markdown" /><section><input type="reset" value="重置"><textarea class="textarea2" name="textarea2" rows="18" cols="90%"placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea><button type="button" class="abb-text2">添加</button></section></form></dialog><output id="memo2"></output></td></tr></table></article><!-- 第二页:英语 结束 --><!-- 第三页:音乐 --><article id="card3"><table><tr class="titleBtn"><td class="displayBtn" onclick="myDialog3.show()">编辑音乐页面按钮 </td><td><marquee behavior="alternate" direction="right">音乐杂记 </marquee></td><td id="delete3" class="deleteBtn">删除音乐页面按钮</td></tr><tr><td><dialog id="myDialog3" class="myDialog"><form class="dialog-form" method="dialog" id="Drag3"><h2>这是一个弹窗留言输入框</h2> <button>×</button></form><form class="textarea-form"><input type="file" name="file3"accept="text/plain, text/css, text/html, text/javascript, text/markdown" /><section><input type="reset" value="重置"><textarea class="textarea3" name="textarea3" rows="18" cols="90%"placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea><button type="button" class="abb-text3">添加</button></section></form></dialog><output id="memo3"></output></td></tr></table></article><!-- 第三页:音乐 结束 --><!-- 第四页:项目 --><article id="card4"><table><tr class="titleBtn"><td class="displayBtn" onclick="myDialog4.show()">编辑项目页面按钮 </td><td><marquee behavior="alternate" direction="right">项目杂记 </marquee></td><td id="delete4" class="deleteBtn"> 删除项目页面按钮</td></tr><tr><td><dialog id="myDialog4" class="myDialog"><form class="dialog-form" method="dialog" id="Drag4"><h2>这是一个弹窗留言输入框</h2> <button>×</button></form><form class="textarea-form"><input type="file" name="file4"accept="text/plain, text/css, text/html, text/javascript, text/markdown" /><sub><aclass="href" href=" " target="_blank"></a> &lt;&gt; &nbsp; <spanstyle="color: red;user-select: text;">^\s*(?=\r?$)\n</span></sub><section><input type="reset" value="重置"><textarea class="textarea4" name="textarea4" rows="18" cols="90%"placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea><button type="button" class="abb-text4">添加</button></section></form></dialog><output id="memo4"></output></td></tr></table></article><!-- 第四页:项目 结束--></section><!--中间留言区 结束 --><!-- 右侧边栏 --><aside class="aside_right"><h2> 网站收藏</h2><details class="webList"><summary>收藏列表</summary></details><details class="localList"><summary>本地列表</summary></details></aside><!-- 右侧边栏 结束--></main><!-- 中间区域main 结束--><!-- 页脚 --><footer><a href="https://blog.csdn.net/lulei5153" target="_blank">作者:与妖为邻</a><script>function formatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');const hours = String(date.getHours()).padStart(2, '0');const minutes = String(date.getMinutes()).padStart(2, '0');const seconds = String(date.getSeconds()).padStart(2, '0');const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];const dayOfWeek = days[date.getDay()];return `${year}-${month}-${day} ${dayOfWeek} ${hours}:${minutes}:${seconds}`;}document.write(formatDate(new Date));</script></footer><!-- 页脚 结束--><script>/* 现在时间*/var current_time = document.getElementById("dateTime");function showTime() {var now = new Date();var year = now.getFullYear();var month = ("0" + (now.getMonth() + 1)).slice(-2);var day = ("0" + now.getDate()).slice(-2);var hour = ("0" + now.getHours()).slice(-2);var min = ("0" + now.getMinutes()).slice(-2);var second = ("0" + now.getSeconds()).slice(-2);var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六",][now.getDay()];var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;current_time.innerHTML = time;}showTime();setInterval(showTime, 1000);/* 现在时间 结束*//* 全屏功能与关闭*/function fullScreen() {var elem = document.documentElement;if (elem.requestFullscreen) {elem.requestFullscreen();} else if (elem.mozRequestFullScreen) { // Firefoxelem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Operaelem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { // IE/Edgeelem.msRequestFullscreen();}}function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.msExitFullscreen();}}// 获取全屏和还原按钮var fullScreenBtn = document.querySelector(".fullScreen");var exitFullScreenBtn = document.querySelector(".exitFullScreen");// 监听全屏和还原事件document.addEventListener("fullscreenchange", function () {if (document.fullscreenElement) {fullScreenBtn.style.display = "none";exitFullScreenBtn.style.display = "block";} else {fullScreenBtn.style.display = "block";exitFullScreenBtn.style.display = "none";}});// 关闭当前窗口function closeAll() {window.close();}/* 全屏功能与关闭 结束*//* 左侧导航 */// 定义变量let chosenSlideNumber = 1; // 当前选择的幻灯片编号let offset = 0; // 幻灯片偏移量let barOffset = 0; // 导航条偏移量// 切换抽屉面板和按钮状态function toggleDrawer(previous, current) {const drawerBoxes = document.querySelectorAll(".aside_left article");const drawerBtnS = document.querySelectorAll(".aside_left button");drawerBoxes[previous - 1].classList.toggle("active");drawerBoxes[current - 1].classList.toggle("active");drawerBtnS[previous - 1].classList.toggle("active");drawerBtnS[current - 1].classList.toggle("active");}// 移动导航条function moveBar(barOffset) {const bar = document.querySelector("#bar p");bar.style.transform = `translateY(${barOffset}%)`;}// 切换到指定编号的幻灯片function slideTo(slideNumber) {let previousSlideNumber = chosenSlideNumber;// 更新偏移量chosenSlideNumber = slideNumber;let slideDelta = (slideNumber - previousSlideNumber) * 100;offset -= slideDelta; // 计算幻灯片偏移量barOffset += slideDelta; // 计算导航条偏移量// 切换抽屉面板和按钮状态toggleDrawer(previousSlideNumber, slideNumber);// 移动幻灯片和导航条moveSlides(offset);moveBar(barOffset);}// 移动幻灯片function moveSlides(offset) {const slides = document.querySelectorAll("#card-section article");slides.forEach((slide) => {slide.style.transform = `translateY(${offset}%)`;});}/*左侧导航结束*//*留言内容*/document.addEventListener("DOMContentLoaded", function () {const todoContainers = [{ textarea: ".textarea1", button: ".abb-text1", container: "#memo1", storageKey: "home" },{ textarea: ".textarea2", button: ".abb-text2", container: "#memo2", storageKey: "newEnglish" },{ textarea: ".textarea3", button: ".abb-text3", container: "#memo3", storageKey: "newMusic" },{ textarea: ".textarea4", button: ".abb-text4", container: "#memo4", storageKey: "newProject" },];todoContainers.forEach(({ textarea, button, container, storageKey }) => {const upText = document.querySelector(textarea);const addTo = document.querySelector(button);const memo = document.querySelector(container);addTo.addEventListener("click", function () {if (upText.value.trim() !== "") {insertHtml(memo, upText.value, "");upText.value = "";upText.focus();saveTodo();} else {alert("内容为空,无法添加!");}});function saveTodo() {let todoArr = Array.from(memo.querySelectorAll(".JS_content")).map((content) => ({name: content.innerHTML,finish: content.classList.contains("finish"),}));localStorage.setItem(storageKey, JSON.stringify(todoArr));}function loadTodo() {try {let todoArr = JSON.parse(localStorage.getItem(storageKey) || "[]");todoArr.forEach((todo) => {insertHtml(memo, todo.name, todo.finish ? "finish" : "");});} catch (e) {console.error(`Failed to load todo for ${storageKey}`, e);}}memo.addEventListener("click", function (event) {const target = event.target;const tgKids = target.parentElement.children;if (tgKids[0].checked) {tgKids[1].classList.add("finish");} else {tgKids[1].classList.remove("finish");}saveTodo();});document.getElementById(`delete${button === ".abb-text" ? "" : button.match(/\d+/)[0]}`).addEventListener("click", function () {const checkedBoxes = memo.querySelectorAll("input[name='checkbox']:checked");if (checkedBoxes.length === 0) {alert("没有选择任何项目");} else {if (confirm("是否删除所选?")) {checkedBoxes.forEach((checkbox) => {checkbox.parentElement.remove();});saveTodo();}}});function insertHtml(target, val, cls) {target.insertAdjacentHTML("beforeend",`<div class='dddd'><input type="checkbox" name='checkbox'><span class='JS_content ${cls}'>${val}</span></div>`);}// 在页面加载时调用持久化存储的loadTodo()函数loadTodo();});});/*本地文件上传添加按钮*/window.onload = function () {var setups = [{ textName: "textarea1", fileName: "file1" },{ textName: "textarea2", fileName: "file2" },{ textName: "textarea3", fileName: "file3" },{ textName: "textarea4", fileName: "file4" },];setups.forEach(function (setup) {var text = document.getElementsByName(setup.textName)[0];var inputFile = document.getElementsByName(setup.fileName)[0];if (text && inputFile) {// 检查元素是否存在inputFile.onchange = function () {var reader = new FileReader();reader.readAsText(this.files[0], "UTF-8");reader.onload = function () {text.value = this.result;};reader.onerror = function () {console.error("Failed to read file: " + reader.error);alert("Failed to read file. Please try again.");};};}});};/*本地文件上传添加按钮 结束*//* 右侧边栏网站收藏 */const webList = document.querySelector(".webList");const localList = document.querySelector(".localList");const webLinks = [{ title: "智能翻译", src: "https://fanyi.baidu.com" },{ title: "哔哩哔哩", src: "https://www.bilibili.com" },{ title: "百度一下,你就知道", src: "https://www.baidu.com" },{ title: "菜鸟教程", src: "https://www.runoob.com/" },{ title: "Electron中文网", src: "https://www.electronjs.org/zh/docs/latest/" },{ title: "制作ico图标", src: "https://www.bitbug.net" },{ title: "Element组件", src: "https://element-plus.org/zh-CN/" },{ title: "原神大地图", src: "https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2¢er=2008.50,-1084.00&zoom=-3.00" },{ title: "vue.js", src: "https://cn.vuejs.org/" },{ title: "w3schools教程", src: "https://www.w3ccoo.com/" },{ title: "现代JS教程", src: "https://zh.javascript.info/" },{ title: "CSS3D字体", src: "https://www.dedexuexi.com/tool/3D/" },{ title: "MDN网络文档", src: "https://developer.mozilla.org/zh-CN/" },{ title: "UI组件", src: "https://uiverse.io/switches" },{ title: "IconFont图标", src: "https://www.iconfont.cn/" },{ title: "vue图标", src: "https://vue-icons.kalimah-apps.com/" },{ title: "GitHub", src: "https://github.com" },];const localLinks = [{ title: "myLogs备忘录", src: "file:///D:/web/备忘录/html备忘录/html/myLogs备忘录.html" },{ title: "简单的计算器", src: "file:///D:/web/备忘录/html备忘录/html/简单的计算器.html" },{ title: "html表格", src: "file:///D:/web/备忘录/html备忘录/html/html表格.html" },{ title: "js生成随机数", src: "file:///D:/web/备忘录/html备忘录/html/js生成随机数.html" },{ title: "html5代码账号密码备忘录样本", src: "file:///D:/web/备忘录/html备忘录/html/html5代码账号密码备忘录样本.html" },{ title: "特别的时钟特别的倒计时", src: "file:///D:/web/备忘录/html备忘录/html/特别的时钟特别的倒计时.html" },{ title: "查看key值页面", src: "file:///D:/web/备忘录/html备忘录/html/真/查看key值页面.html" },];const createLink = (title, src) => {if (!title || !src) {console.error("链接缺少必要的属性");return null;}const link = document.createElement("a");link.href = src;link.target = "_blank";link.innerText = title;return link;};const createList = (list, parent) => {if (!parent) {console.error("父元素未找到");return;}const ul = document.createElement("ul");list.forEach((item) => {const link = createLink(item.title, item.src);if (link) {const li = document.createElement("li");li.appendChild(link);ul.appendChild(li);}});parent.appendChild(ul);};createList(webLinks, webList);createList(localLinks, localList);/* 右侧边栏网站收藏 结束 *//* 通用的拖动功能 *//* 通用的拖动功能 */const initDragAndDisplay = (hiddenElementId, dragElementId) => {const hiddenElement = document.querySelector(hiddenElementId);document.querySelector(dragElementId).addEventListener("mousedown", (e) => {const x = e.pageX - hiddenElement.offsetLeft;const y = e.pageY - hiddenElement.offsetTop;const move = (e) => {hiddenElement.style.left = e.pageX - x + "px";hiddenElement.style.top = e.pageY - y + "px";};document.addEventListener("mousemove", move);document.addEventListener("mouseup", () => {document.removeEventListener("mousemove", move);}, { once: true });});};/* 初始化所有的拖动按钮 */const initAllDragsAndDisplays = () => {["", "2", "3", "4"].forEach((num) => {initDragAndDisplay(`#myDialog${num}`, `#Drag${num}`);});};initAllDragsAndDisplays();/* 4个拖动按钮的实现结束*/</script>
</body></html>