本文主要是介绍html备忘录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
备忘录
网站收藏数据：
网站收藏.js
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" },{ title: "江下科技", src: "https://www.onlinedo.cn/" },{ title: "CSS可视化", src: "https://css.bqrdh.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: "查查看全部localStorage数据", src: "file:///D:/web/html备忘录/html/真/查看全部localStorage数据.html" },{ title: "原神角色数据列表.html", src: "D:/data/原神/原神角色数据列表.html" },
];<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试版备忘录首页</title><!-- 修改数据器引入 highlight.js 的 CSS 文件 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"><!-- <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: 262px;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(35%, 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(35%, -93%);}img {width: 60px;height: 35px;border-radius: 50%;transition: transform 0.3s ease;position: absolute;&:hover {transform: scale(1.3);filter: drop-shadow(0 0 0.3em #ff0202);}}.kong {margin-top: 7px;margin-left: 200px;}.ying {top: 7px;margin-left: 2px;}}/* 时间 */#dateTime1 {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;}}#dateTime2 {transform: translate(40%, 80%);position: fixed;display: flex;flex-direction: column;align-items: center;background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 10rem;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: 5rem;}}/* 倒计时 */#countdownElement {font-size: 1.3rem;border-radius: 3px;/* background-color: #f30303; *//* border: none; */padding: 3px;}#dialogCountdownElement {transform: translate(180%, 80%);z-index: 999;}#dialogCountdownElement::backdrop {backdrop-filter: blur(2px);}/* 显示所有复选框按钮 */#showCheckboxesButton {font-size: 1.5rem;border-radius: 3px;/* background-color: #f30303; *//* border: none; *//* padding: 3px; */.countdown {color: #f30303;background-color: #f3eb03;padding: 3px;}}/* 全屏还原关闭按钮 */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 {/* z-index:10; */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;text-align: center;td {height: 24px;}.displayBtn {color: #67C23A;background: #0bb811c9;text-shadow: 1px 1px 1px rgb(0, 0, 0);width: 30vw;cursor: pointer;font-weight: bold;&:hover {background-color: #f3d303;color: #e6a23c;}}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;z-index: 999;opacity: 0.9;.dialog-form {box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);display: flex;justify-content: space-between;padding: 5px;cursor: move;h2 {color: #f85f5faf;text-shadow: 1px 1px 1px #030303;}/* 关闭按钮 */button {background: #ff000004;border: none;font-size: 30px;/* 放大镜效果 */transform: scale(1.6);margin: 0 5px;width: 30px;height: 28px;&:hover {background-color: #f30303;border-top-right-radius: 5px;}}}.textarea-form {background-color: #144756;/* 修改数据器按钮 */#readFolder {font-size: 18px;color: #67c23a;text-shadow: 1px 1px 1px #070707;cursor: pointer;}/* 编辑文本按钮 */#toolbar {margin: 0 5px 5px 5px;button {font-size: 18px;background-color: hsla(160, 100%, 37%, 0.63);border: 1PX solid #909399;padding: 1PX;border-radius: 2PX;}/* 编辑文本输入框 */#editor {background-color: #909399;text-shadow: 1px 1px 1px #0a0000;margin: 5px;padding: 10px;border-radius: 5px;/* 最大高度 */max-height: 500px;/* 滚动条 */overflow-y: auto;}}input[type="file"] {box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);margin: 5px;}sub {color: #67C23A;text-shadow: 1px 1px 1px #0a0000;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;color: #67C23A;text-shadow: 1px 1px 1px #0a0000;}}}}}/* 隐藏的输入框 结束 *//* <!-- -------------------------分割线---------------------------------------- --> *//* 留言内容布局 */output {opacity: 0.8;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);/* 留言内容布局 结束*//* <!-- -------------------------分割线---------------------------------------- --> *//* 留言内容字体样式 */.Success {input[type="checkbox"] {display: none;}.Message {color: #67c23a;text-shadow: 1px 1px 1px #000;margin: 10px;border-radius: 5px;text-align: center;user-select: text;* {user-select: text;}&:hover {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);}}pre:hover {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);}.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);/* 删除线 */text-decoration: line-through;text-decoration-color: #c23a3a;text-decoration-thickness: 2px;}a {text-decoration: none;color: #ebf704;}}/* <!-- -------------------------分割线---------------------------------------- --> *//* 修改数据器样式 开始*/#addReadFolderArea {margin-top: 0px;margin-left: 110px;#addReadFolder {display: flex;/* 保存按钮 */#fileSave {color: #e6a23c;}/* 关闭按钮 */.cancel-button {color: #f56c6c;}}/* 修改内容区 */#fileContent {white-space: pre-wrap;border: 1px solid #ccc;padding: 5px;height: 865px;overflow: auto;/* 添加此行 */}}/* 修改数据器样式 结束*/.delete-button {margin-left: 10px;cursor: pointer;background-color: red;color: white;border: none;padding: 5px;border-radius: 3px;}}/* 留言内容字体样式 结束 *//* <!-- -------------------------分割线---------------------------------------- --> *//* 中间留言区 结束*//* 右侧边栏网站收藏 */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;user-select: text;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博客" target="_blank"><img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻"></a><figcaption class="my_name1">与妖为邻</figcaption><figcaption class="my_name2">与妖为邻</figcaption><a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"title="首页" target="_blank"><img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻"></a></figure><!-- -------------------------分割线---------------------------------------- --><!-- 第一组时间 --><time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-07-10</time><!-- 第二组时间 --><time datetime="2024-07-10" title="2024-07-10" id="dateTime2">2024-07-10</time><!-- -------------------------分割线---------------------------------------- --><!-- 倒计时 --><button onclick="dialogCountdownElement.showModal()" id="countdownElement">倒计时</button><dialog id="dialogCountdownElement"><form method="dialog"><div><label for="message">更改提示信息：</label><input type="text" id="message" value="距离2024年国庆节还有："></div><div><label for="targetDate">更改目标日期：</label><input type="date" id="targetDate"></div><button type="submit" style="display: block; margin: 5px auto;">关闭</button></form><p>2025主要节日时间表</p><ul><li>元旦：2025年1月1日</li><li>春节：2025年2月12日</li><li>清明节：2025年4月4日</li><li>劳动节：2025年5月1日</li><li>端午节：2025年6月2日</li><li>中秋节：2025年9月21日</li><li>国庆节：2025年10月1日</li></ul></dialog><!-- -------------------------分割线---------------------------------------- --><!-- 天气 --><iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"src="https://i.tianqi.com/?c=code&id=99"></iframe><!-- -------------------------分割线---------------------------------------- --><button id="showCheckboxesButton">显示所有复选框10秒后自动隐藏</button><!-- -------------------------分割线---------------------------------------- --><!-- 全屏还原关闭按钮 --><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 type="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" /><sub><aclass="href" href=" " target="_blank"></a> &lt;&gt; &nbsp; <spanstyle="color: red;user-select: text;">^\s*(?=\r?$)\n</span></sub><!-- 修改数据器按钮 --><button type="button" id="readFolder"onclick="addReadFolderArea.show()">修改数据器</button><!-- 编辑文本 --><menu id="toolbar"><button type="button" id="btnBold">加粗</button><button type="button" id="btnItalic">斜体</button><button type="button" id="btnUnderline">下划线</button><button type="button" id="btnStrikeThrough">删除线</button><button type="button" id="btnInsertOrderedList">有序列表</button><button type="button" id="btnInsertUnorderedList">无序列表</button><button type="button" id="btnJustifyLeft">左对齐</button><button type="button" id="btnJustifyCenter">居中对齐</button><button type="button" id="btnJustifyRight">右对齐</button><button type="button" id="btnJustifyFull">两端对齐</button><button type="button" id="btnCreateLink">创建链接</button><button type="button" id="btnUnlink">取消链接</button><button type="button" id="btnInsertImage">插入图片</button><button type="button" id="btnForeColor">文字颜色</button><button type="button" id="btnBackground">背景颜色</button><button type="button" id="btnUndo">撤销</button><button type="button" id="btnRedo">重做</button><button type="button" id="btnExportHtml">导出HTML</button><button type="button" id="btnReset">重置</button><p id="editor" contenteditable="true" data-placeholder="在此输入需要编辑的文本"></p></menu><section><input type="reset" value="重置"><textarea id="textareaHTML" class="textarea1" name="textarea1" rows="18"cols="125"placeholder="选择txt、js、css或html文件,文件内容会被自动读取,简陋版编辑器按钮是javascript操作文件内容,修改文件内容后,请快捷键ctrl+s保存"></textarea><button type="button" class="abb-text1">添加</button></section></form></dialog><output id="memo1"><!-- 修改数据器修改内容区 --><dialog id="addReadFolderArea"></dialog></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" /><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="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" /><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="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="快速去除VS Code自动添加的空行: 通过Ctrl+h快捷键调出替换界面添加 ^\s*(?=\r?$)\n 并Alt+R"></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>更新时间：<script>document.write('2024/09/05 20:00:00');</script></span><a href="https://blog.csdn.net/lulei5153" target="_blank">作者：与妖为邻</a>刷新时间：<script>document.write((d = new Date(), `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)} 星期${'日一二三四五六'[d.getDay()]} ${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(-2)}`));</script></script></footer><!-- 页脚 结束-->
</body>
<script src="file:///D:/web/html首页/网站收藏.js"></script>
<!-- 修改数据器引入 highlight.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>/* 现在时间 */(s = el => { d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}` })(setInterval(() => ["dateTime1", "dateTime2"].forEach(id => s(document.getElementById(id))), 1000));/* 现在时间 结束 *//* 倒计时 */function countdown() {// 加载时从localStorage读取数据window.onload = function () {['message', 'targetDate'].forEach(key => {const value = localStorage.getItem(key);if (value) document.getElementById(key).value = value;});};// 保存数据到localStoragefunction saveData() {['message', 'targetDate'].forEach(key => {const value = document.getElementById(key).value;localStorage.setItem(key, value);});}// 监听输入框的变化并保存数据['message', 'targetDate'].forEach(id => {document.getElementById(id).addEventListener('input', saveData);});function showCountdown() {const message = document.getElementById('message').value;const targetDateInput = document.getElementById('targetDate');const targetDateValue = targetDateInput.value;const now = new Date();const targetDate = targetDateValue ? new Date(targetDateValue) : new Date(2024, 9, 1); // 默认值：2024年10月1日const diff = targetDate - now;const days = Math.floor(diff / (1000 * 60 * 60 * 24));const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((diff % (1000 * 60)) / 1000);const countdownElement = document.getElementById('countdownElement');countdownElement.innerHTML = `${message}${days}天${hours}小时${minutes}分${seconds}秒`;}showCountdown();setInterval(showCountdown, 1000);}// 调用函数以启动倒计时countdown();/* 倒计时 结束*//* 全屏功能与关闭*/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: "English" },{ textarea: ".textarea3", button: ".abb-text3", container: "#memo3", storageKey: "Music" },{ textarea: ".textarea4", button: ".abb-text4", container: "#memo4", storageKey: "Project" },];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(".Message")).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();updateIndexes(); // 更新序号}}});// 添加动态id属性function generateUniqueId() {return 'checkbox-' + Math.random().toString(36).substr(2, 9);}function insertHtml(target, val, cls) {const uniqueId = generateUniqueId();const index = getNextIndex();target.insertAdjacentHTML("beforeend",`<div class='Success'>${index}.<input type="checkbox" name='checkbox' id='${uniqueId}'><label class='Message ${cls}' for='${uniqueId}'> ${val}</label></div>`);}let indexCounter = 1;function getNextIndex() {return indexCounter++;}function updateIndexes() {const messages = memo.querySelectorAll('.Success');messages.forEach((message, index) => {message.firstChild.textContent = `${index + 1}.`;});indexCounter = messages.length + 1; // 更新计数器}// 显示所有复选框10秒后自动隐藏document.getElementById('showCheckboxesButton').addEventListener('click', function () {// 获取所有带有 name='checkbox' 的复选框const checkboxes = document.querySelectorAll('input[name="checkbox"]');// 遍历并显示每个复选框checkboxes.forEach(function (checkbox) {checkbox.style.display = 'inline'; // 或其他你希望的显示方式});// 10秒倒计时let countdown = 10;const countdownInterval = setInterval(function () {// 使用padStart方法将个位数补0const countdownWithZero = countdown.toString().padStart(2, '0');document.getElementById('showCheckboxesButton').innerHTML = `显示所有复选框 <span class='countdown'>${countdownWithZero}</span> 秒后自动隐藏`;countdown--;if (countdown < 0) {clearInterval(countdownInterval);document.getElementById('showCheckboxesButton').textContent = '显示所有复选框10秒后自动隐藏';// 隐藏复选框checkboxes.forEach(function (checkbox) {checkbox.style.display = 'none'; // 或其他你希望的隐藏方式});}}, 1000); // 每秒更新一次});// 在页面加载时调用持久化存储的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 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个拖动按钮的实现结束*//*编辑文本输入框的占位符*/document.addEventListener('DOMContentLoaded', function () {const editor = document.getElementById('editor');const placeholder = editor.getAttribute('data-placeholder');editor.addEventListener('focus', function () {if (editor.textContent === placeholder) {editor.textContent = '';editor.style.color = ''; // 恢复默认颜色}});editor.addEventListener('blur', function () {if (editor.textContent === '') {editor.textContent = placeholder;editor.style.color = 'gray'; // 设置占位符颜色}});// 初始化时检查内容if (editor.textContent === '') {editor.textContent = placeholder;editor.style.color = 'gray'; // 设置占位符颜色}});/*编辑文本输入框的占位符 结束*//* 编辑文本输入框的清空按钮 */document.getElementById('btnReset').addEventListener('click', function () {document.getElementById('editor').innerText = '';});/* 简单的文本编辑器 */document.addEventListener('DOMContentLoaded', () => {const editor = document.getElementById('editor');const exportedHtml = document.getElementById('textareaHTML');function execCmd(command, value = null) {document.execCommand(command, false, value);}function exportHtml() {// 获取编辑器内容let htmlContent = editor.innerHTML;// 使用正则表达式查找所有 <a> 标签并添加 target="_blank"htmlContent = htmlContent.replace(/<a\s+/g, '<a target="_blank" ');// 设置导出的 HTML 内容exportedHtml.value = htmlContent;}document.getElementById('toolbar').addEventListener('click', (event) => {const target = event.target;const command = target.id.replace('btn', '');switch (command) {case 'Bold':case 'Italic':case 'Underline':case 'StrikeThrough':case 'InsertOrderedList':case 'InsertUnorderedList':case 'JustifyLeft':case 'JustifyCenter':case 'JustifyRight':case 'JustifyFull':case 'Unlink':case 'Undo':case 'Redo':execCmd(command);break;case 'CreateLink':case 'InsertImage':case 'ForeColor':case 'Background':const value = prompt(`输入${command === 'CreateLink' ? '链接地址' : command === 'InsertImage' ? '图片地址' : command === 'ForeColor' ? '文字颜色' : '背景颜色'}`, command === 'CreateLink' ? 'http://' : command === 'InsertImage' ? 'http://' : command === 'ForeColor' ? '#000000' : '#ffff00');execCmd(command, value);break;case 'ExportHtml':exportHtml();break;}});editor.focus();});/*简单的文本编辑器 结束*//*修改数据器*/function initializeFileEditor() {// 初始化对话框内容document.getElementById('addReadFolderArea').innerHTML = `<div id="addReadFolder"><form id="buttonContainer"><div id="fileTree"></div><button type="button" id="fileSave">保存</button><button type="submit" class="cancel-button">关闭</button> </form><div id="fileContent" contenteditable="true" name="textarea1"></div></div>`;// 修改数据器功能let currentFileHandle = null; // 变量用于存储当前文件句柄document.getElementById('readFolder').addEventListener('click', async () => {try {const directoryHandle = await window.showDirectoryPicker();const fileTree = document.getElementById('fileTree');const fileContent = document.getElementById('fileContent');fileTree.innerHTML = ''; // 清空文件树内容fileContent.innerHTML = ''; // 清空文件内容区域async function readDirectory(directoryHandle, parentElement) {const ul = document.createElement('ul');parentElement.appendChild(ul);for await (const entry of directoryHandle.values()) {const li = document.createElement('li');const entryName = document.createElement('span');entryName.textContent = entry.name;li.appendChild(entryName);ul.appendChild(li);if (entry.kind === 'directory') {entryName.textContent = `[文件夹] ${entry.name}`;li.addEventListener('click', async (e) => {e.stopPropagation();if (li.classList.contains('open')) {li.classList.remove('open');li.querySelector('ul').remove();} else {li.classList.add('open');await readDirectory(entry, li);}});} else if (entry.kind === 'file') {li.addEventListener('click', async (e) => {e.stopPropagation();currentFileHandle = entry;const file = await entry.getFile();fileContent.style.display = 'block';fileContent.textContent = await file.text();// 使用 highlight.js 高亮显示代码hljs.highlightElement(fileContent);});const deleteButton = document.createElement('button');deleteButton.textContent = '删除';deleteButton.classList.add('delete-button');deleteButton.addEventListener('click', async (e) => {e.stopPropagation();if (confirm(`确定删除 ${entry.name}?`)) {await directoryHandle.removeEntry(entry.name);li.remove();fileContent.innerHTML = '';alert('文件删除成功!');}});entryName.appendChild(deleteButton);}}}await readDirectory(directoryHandle, fileTree);} catch (error) {console.error('操作失败:', error);alert('操作失败，请重试。');}});// 同时按下Ctrl键和's'键保存document.addEventListener('keydown', async (event) => {if (event.ctrlKey && event.key === 's') {event.preventDefault();try {if (currentFileHandle) {const writable = await currentFileHandle.createWritable();await writable.write(document.getElementById('fileContent').textContent);await writable.close();alert('文件保存成功!');}} catch (error) {console.error('保存失败:', error);alert('保存失败，请重试。');}}});// 为id="fileSave"的保存按钮添加保存功能document.getElementById('fileSave').addEventListener('click', async () => {try {if (currentFileHandle) {const writable = await currentFileHandle.createWritable();await writable.write(document.getElementById('fileContent').textContent);await writable.close();alert('文件保存成功!');} else {alert('请先选择一个文件进行编辑。');}} catch (error) {console.error('保存失败:', error);alert('保存失败，请重试。');}});}// 初始化文件编辑器initializeFileEditor();/*修改数据器 结束*/
</script>
</html>这篇关于html备忘录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
