修改留言板

 

<!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,一经查实,立即删除!

相关文章

Netty Websocket SpringBoot Starter

netty websocket starter Quick Start Demo 项目 添加依赖 <!--添加源--> <repository><id>github</id><url>https://maven.pkg.github.com</url><snapshots><enabled>true</enabled></snapshots> </reposit…

SchedulerLock分布式定时任务锁

1.pom中引入依赖&#xff0c;这里使用redis作为锁 <dependency><groupId>net.javacrumbs.shedlock</groupId><artifactId>shedlock-spring</artifactId><version>4.12.0</version></dependency><dependency><groupId…

根据脚手架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 架…

数据分包:145字节版本

分包 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2023/08/04 14:35:21 // Design Name: // Module Name: dat_send_blocks_v // Project Name: // Target Devices: // Tool Versions: // Description: // // Dependencies: // // Revisi…

pdf工具

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

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

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

Qt: 利用QSplitter将主窗口与Docker窗口初始宽度比例2:1

要实现主窗口和 QDockWidget 之间的比例为 2:1&#xff0c;您可以使用 QSplitter 来创建一个可以调整大小的分隔窗口&#xff0c;其中一个区域放置主窗口的内容&#xff0c;另一个区域放置 QDockWidget。以下是一个示例代码&#xff0c;演示了如何实现主窗口和 QDockWidget 之间…

Power BI 工具介绍

Power BI是一款商业智能&#xff08;BI&#xff09;软件&#xff0c;由微软开发&#xff0c;旨在帮助用户将复杂的数据转化为视觉化的交互式见解。Power BI提供了一套完整的工具&#xff0c;包括数据连接、数据准备、数据建模、数据分析和数据可视化等功能&#xff0c;使用户能…

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

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

Docker 安装 PostgreSQL

1. 启动 PostgreSQL 容器 docker run --name ffj-postgres -p 5432:5432 -e POSTGRES_PASSWORDCisc0123 -d postgres docker run&#xff1a;启动一个新的容器。--name指定容器名称为 ffj-postgres。-p 5432:5432&#xff1a;将主机的 5432 端口映射到容器的 5432 端口。-e P…

智能运维提升企业长期安全防御能力

随着企业数智化转型加速&#xff0c;企业在享受技术革新带来的效率提升与业务模式创新的同时&#xff0c;也面临着日益复杂且多变的网络安全威胁。 2024年&#xff0c;全球网络环境进一步演变&#xff0c;高级持续性威胁&#xff08;APT&#xff09;、勒索软件攻击、数据泄露以…

sqlalchemy反射视图

sqlalchemy反射视图 一个名为my_view的视图,使用SQLAlchemy来操作这个视图 from sqlalchemy import create_engine, MetaData# 创建数据库连接 engine = create_engine(数据库连接字符串)# 创建一个MetaData对象 metadata = MetaData()# 反射视图 metadata.reflect(bind=eng…

解决npm install 安装报错记录贴

前言 环境背景 nodeJS v.14.8.3(nvm安装) package.json: “node-sass”:“8.0.0” 网络环境&#xff1a; 公司内网 镜像地址&#xff1a;公司的镜像源 解决报错过程&#xff1a; 1.换了最新版 vscode&#xff0c; 然后重装 node_modules 还是不行&#xff0c; 报PostCSS rec…

性能优化--- iframe阻塞页面渲染的问题,如何优化?

问题描述&#xff1a; iframe 阻塞问题会阻塞页面的加载&#xff0c;因为 iframe 中的内容需要在父页面加载完成后才能被加载和渲染。这意味着在 iframe 内容完全加载和渲染之前&#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)等。以命名实…

Spring Boot 3.0 版本SLF4J 对于JUL 日志 Over的处理问题解决

文章目录 Spring Boot 3.0 版本SLF4J 对于JUL 日志 Over的处理问题解决问题背景问题调研解决方案 Spring Boot 3.0 版本SLF4J 对于JUL 日志 Over的处理问题解决 问题背景 升级Spring Boot 到 3.3.1 版本后&#xff0c;发现原来的JUL日志输出无法在Over到SLF4J的实现类。 问题…

第九十五周周报

学习目标&#xff1a; 模型 学习时间&#xff1a; 2024.7.6-2024.7.12 学习产出&#xff1a; 一、模型 这周改了模型&#xff0c;目前能跑且loss稳定&#xff0c;但是fid降不下去&#xff0c;正在找原因。 二、实习 周三展示了demo&#xff0c;目前正在等待通知。