修改留言板

 

<!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()">&times</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>&times</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>&times</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>&times</button></form><form class="textarea-form"><input type="file" name="file4"accept="text/plain, text/css, text/html, text/javascript, text/markdown" /><sub>&lt;aclass="href" href=" " target="_blank"&gt;&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;lt;&amp;gt;&nbsp;&nbsp;&nbsp;&nbsp; &amp;nbsp;&nbsp;&nbsp;&nbsp;&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&center=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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45600.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

根据脚手架archetype快速构建spring boot/cloud项目

1、找到archetype&#xff0c;并从私仓下载添加archetype到本地 点击IDEA的file&#xff0c;选择new project 选择maven项目&#xff0c;勾选create from archetype 填写archetype信息&#xff0c;&#xff08;repository填写私仓地址&#xff09; 2、选择自定义的脚手架arche…

关于正点原子的alpha开发板的启动函数(汇编,自己的认识)

我傻逼了&#xff0c;这里的注释还是不要用&#xff1b; 全部换成 /* */ 这里就分为两块&#xff0c;一部分是复位中断部分&#xff0c;第二部分就是IRQ部分&#xff08;中断部分最重要&#xff09; 我就围绕着两部分来展开我的认识 首先声明全局 .global_start 在 ARM 架…

pdf工具

iLovePDF | 为PDF爱好者提供的PDF文件在线处理工具 https://www.ilovepdf.com/zh-cn 图片 pdf 合并成一个pdf也可以拆分

近期matlab学习笔记,学习是一个记录,反复的过程

近期matlab学习笔记&#xff0c;学习是一个记录&#xff0c;反复的过程 matlab的mlx文件在运行的时候&#xff0c;不需要在文件夹路径下&#xff0c;也能运行&#xff0c;但是需要调用子函数时&#xff0c;就需要在文件所在路径下运行 那就先运行子函数&#xff0c;把路径换过来…

YOLOv10: Real-Time End-to-End Object Detection

双重标签分配 与一对一多分配不同&#xff0c;一对一匹配只为每个地面真相分配一个预测&#xff0c;避免了NMS后处理。然而&#xff0c;这导致了较弱的监督&#xff0c;导致次优的准确性和收敛速度。幸运的是&#xff0c;这种缺陷可以通过一对一多分配来弥补。为此&#xff0c…

Redis的配置优化、数据类型、消息队列

文章目录 一、Redis的配置优化redis主要配置项CONFIG 动态修改配置慢查询持久化RDB模式AOF模式 Redis多实例Redis命令相关 二、Redis数据类型字符串string列表list集合 set有序集合sorted set哈希hash 三、消息队列生产者消费者模式发布者订阅者模式 一、Redis的配置优化 redi…

Androidstudio安卓开发,SharedPreferences实现登录注册

1. 项目涉及到的技术点 SharedPreferences的使用 2. 效果图 3. 实现过程 注册布局文件&#xff1a;activity_register.xml <?xml version"1.0" encoding"utf-8"?> <androidx.appcompat.widget.LinearLayoutCompat xmlns:android"http:…

mindspore打卡第24天之LSTM+CRF序列标注

LSTMCRF序列标注 概述 序列标注指给定输入序列&#xff0c;给序列中每个Token进行标注标签的过程。序列标注问题通常用于从文本中进行信息抽取&#xff0c;包括分词(Word Segmentation)、词性标注(Position Tagging)、命名实体识别(Named Entity Recognition, NER)等。以命名实…

细说MCU用定时器控制ADC采样频率的实现方法

目录 一、工程依赖的硬件及背景 二、设计目的 三、 建立工程 1.选择时钟源和Debug模式 2.配置系统时钟和ADC时钟 3.配置串口 4.配置ADC 5.设置TIM3 6.设置TIM4 7.配置中断 8.GPIO 四、代码修改 1.重新定义ADC回调函数 2.在主程序中编写数据发送代码 3.使能ADC和…

json-server服务使用教程

目录标题 安装 json-server启动 json-server 本地服务 安装 json-server npm install -g json-server0.17.4json-server -v报错请参考&#xff1a;执行json-server -v报错 因为在此系统上禁止运行脚本。 启动 json-server 本地服务 查看本机IP&#xff1a;ipconfig Shift右…

220.贪心算法:根据身高重建队列(力扣)

代码解决 class Solution { public:// 定义排序规则&#xff1a;首先按身高降序排序&#xff0c;如果身高相同则按k值升序排序static bool cmp(const vector<int>&a, const vector<int>&b){if (a[0] b[0]) return a[1] < b[1]; // 如果身高相同&#…

51单片机-第三节-LCD1602调试工具,矩阵键盘

一、LCD调试工具函数&#xff1a; 使用&#xff1a; 所有函数&#xff0c;前两个参数&#xff0c;均为指定显示位置。 四个参数的&#xff0c;第四个参数&#xff0c;为保留位数&#xff0c;少的保留后面&#xff08;123,2 -> 23&#xff09;&#xff0c;多的前面补零。 …

Web开发 —— 放大镜效果(HTML、CSS、JavaScript)

目录 一、需求描述 二、实现效果 三、完整代码 四、实现过程 1、HTML 页面结构 2、CSS 元素样式 3、JavaScript动态控制 &#xff08;1&#xff09;获取元素 &#xff08;2&#xff09;控制大图和遮罩层的显隐性 &#xff08;3&#xff09;遮罩层跟随鼠标移动 &…

k8s核心操作_k8s中的存储抽象_基本概念与NFS搭建_Deployment使用NFS进行挂载---分布式云原生部署架构搭建028

然后我们继续开始看 如果我们使用容器部署,比如我们有三个节点,一个是master,一个node1 一个是node2 那么pod 中我们可以看到,容器中的 /data 等各个目录都映射了出来了,但是 如果比如上面红色的部分,有个pod,原来在node2上,最右边那个,但是这个pod宕机了 那么,k8s会在node…

永磁同步电机谐波抑制算法(7)——基于自适应陷波(adaptive notch filter,ANF)的精确谐波电流抑制策略

1.前言 1.1经典谐波抑制策略存在的问题 在之前的谐波抑制专题中&#xff0c;主要介绍了两种谐波抑制策略——基于多同步旋转坐标系的谐波抑制策略以及基于比例积分谐振PIR调节器的谐波抑制策略&#xff0c;同时还介绍了这两种策略的改进办法&#xff0c;进而使得这两种策略在…

Go:基本变量与数据类型

目录 前言 前期准备 Hello World! 一、基本变量 1.1 声明变量 1.2 初始化变量 1.3 变量声明到初始化的过程 1.4 变量值交换 1.5 匿名变量 1.6 变量的作用域 二、数据类型 1.1 整型 1.2 浮点型 1.3 字符串 1.4 布尔类型 1.5 数据类型判断 1.6 数据类型转换 1.…

NewStarCTF 2023 week5--web

目录 Unserialize Again 法一:(非预期) 法二: Final Yes Pickle pppython? 4-复盘 Unserialize Again f12告诉了我们cookie, 查看一下,可以发现 pairing.php <?php highlight_file(__FILE__); error_reporting(0); class story{private $useradmin;public $p…

Centos7 新增yum源

背景&#xff1a;原来的yum源&#xff0c;无法下载yum包了。新增一个阿里云的&#xff08;网易163的源失效了&#xff0c;无法使用&#xff09; Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was …

three.js官方案例webgpu_reflection.html学习记录

目录 ​1 判断浏览器是否支持 2 THREE.DirectionalLight 2.1DirectionalLightShadow 3 Texture 3.1 .wrapS 3.2 .wrapT 3.3 .colorSpace 4 创建地面 5 WebGPURenderer 6 OrbitControls 控制器 7 屏幕后处理 import * as THREE from three;import { MeshPhongNodeMa…

简析“请求头”——可以用“头部字典”按需定制请求头

请求头是HTTP请求的重要部分&#xff0c;可以用“头部字典”按需定制请求头。 (笔记模板由python脚本于2024年07月12日 19:28:44创建&#xff0c;本篇笔记适合喜欢钻研web知识点的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free…