第7次修改了可删除可持久保存的前端html备忘录
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>备忘录(memorandum)</title><style>* {margin: 0;}textarea,div {background-color: rgba(103, 240, 49, 0.621);}div input+button {background-color: #fff5664f;}a {color: #f5de0b;text-decoration: none;}div input+button+button {background-color: #47eb0b;}/* div>button {display: none;} */form,h1 {/* 块级元素转行内元素 ；行内转块：display:block; 块、行内元素转换行内块：display:inline-block;*/display: inline;}button,h1,input {/* 禁止元素选中； 解除文本选中user-select: text;*/user-select: none;}/* 完成样式 */.finish {/* 文本-装饰：删除线 */text-decoration: line-through;/* 文本阴影：水平偏移量 垂直偏移量 模糊距离 阴影颜色 *//* 阴影效果：水平偏移量 垂直偏移量 模糊距离 阴影颜色 内阴影 */text-shadow: 2px 2px 2px rgb(240, 48, 10);box-shadow: 0 0 10px 5px rgba(90, 9, 9, 0.916);background-color: rgba(12, 1, 1, 0.447);color: #5e0606;}/* 下面的是颜色样式*/h1 {color: #fff;text-shadow:2px 2px 2px #ddd,4px 4px 2px #bbb,6px 6px 2px #999,8px 8px 2px #777,10px 10px 2px #555,12px 12px 2px #333,14px 14px 2px #111;}bdi {color: #df1212;border-radius: 10px;background-color: #efed6a;}u {color: #fff;text-shadow:1px 1px 2px #ddd,2px 2px 2px #bbb,3px 3px 2px #999,4px 4px 2px #777;}button,input {cursor: pointer;border: 0;line-height: 30px;padding: 0 10px;font-size: 1rem;border-radius: 10px;background-color: rgba(220, 0, 0, 1);background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);color: #fcf9f9;text-shadow: 1px 1px 1px #100000;}a,textarea {line-height: 2;font-size: 1rem;text-align: center;color: #fff;text-shadow: 1px 1px 1px #000;}div,u,h1,textarea {background-color: rgba(44, 220, 0, 0.5);background-image: linear-gradient(to top left,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 30%,rgba(0, 0, 0, 0));box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),inset -2px -2px 3px rgba(0, 0, 0, 0.6);box-sizing: border-box;padding: 5px 1px;border: 2px solid rgba(173, 12, 157, 0.616);border-radius: 10px;}textarea:hover,input:hover,button:hover {background-color: rgba(78, 168, 13, 0.587);}div input+button+button:hover {background-color: rgb(251, 231, 11);}span:hover {box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);}button:active,input:active {box-shadow:inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}::placeholder {color: rgb(255, 255, 255);box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);letter-spacing: 13px;}::placeholder,span {color: rgb(255, 255, 255);border-radius: 10px;background-color: #0a541e;text-shadow:1px 1px 2px #ddd,2px 2px 2px #bbb,3px 3px 2px #999,4px 4px 5px #777;}/* =============第一种input的checkbox样式================= input[type="checkbox"] {width: 21px;height: 21px;position: relative;}*//* ---------------------------第2种input的checkbox样式----------------------------------------- *//* input的checkbox样式添加伪元素*/input[type="checkbox"]::after {content: "";width: 100%;height: 100%;border: 2px solid #f10505;position: absolute;left: -3px;top: -3px;border-radius: 50%;}input[type="checkbox"] {-webkit-appearance: none;appearance: none;width: 25px;height: 25px;position: relative;margin-right: 10px;background-color: #fff666;}/* ---------------------------------------------*//* 设置checkbox点击之后的样式*/input[type="checkbox"]:checked::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out;}/* 重新设置span的样式 */span {text-decoration-color: #bf1313;text-underline-offset: 1px;/* 添加过渡效果 */transition: all 0.5s;}/* span添加hover事件 */span:hover {text-decoration-color: var(--checked);text-underline-offset: 10px;color: var(--checked);}/* *****************备用信息盒子************************ */.model-box {/* 隐藏盒子*/display: none;}.model-box .content {position: absolute;top: 100px;/* calc方法可以自动计算数值 */left: calc(50% - 270px);width: 680px;height: 350px;border-radius: 5px;/* 盒子阴影 */box-shadow: 0 2px 12px rgba(43, 4, 4, 0.2);background-color: #cfe9d4;}h2 {padding: 0 10px;}.model-box .content .title {/* 弹性布局 */display: flex;/* 让子元素水平与两端对齐 */justify-content: space-between;height: 50px;line-height: 50px;/* 鼠标移入呈现移动光标 */cursor: move;border-radius: 5px;background-color: #a0eab0;}.model-box .content .title i {/* i标签默认是斜体 这个属性可以变正 */font-style: normal;font-size: 50px;color: #b1b4ba;cursor: pointer;margin-right: 10px;line-height: 42px;}/*备用信息 X 鼠标移入变色 */.model-box .content .title i:hover {color: #110647;}.mess button {background-color: #ea600b;/* 相对定位 */position: relative;top: 10px;}bdi,.mess {margin: 10px;}</style>
</head><body background="yyds.jpg" style="background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%; "><h1><dfn>备忘录</dfn>(memorandum)</h1><hr><textarea class="text-input-box" rows="1" cols="50%" placeholder="请输入备忘内容"></textarea><button type="text"class="addto">添加</button><button id="openButton">打开URL</button><input type="submit" value="查看备用信息"class="open" /><hr><!--------------------- 隐藏的备用信息html盒子------------------------- --><main class="model-box"><main class="content"><main class="title"><h2 class="xzcz">备用信息</h2><i class="close">×</i></main><main class="mess"><u><a href="输入网站地址" target="_blank">输入网站名称</a></u><bdi>^\s*(?=\r?$)\n</bdi><hr><button><a href="https://www.baidu.com/s" target="_blank">百度一下</a></button><button><a href="https://www.runoob.com/tags/html-colorpicker.html" target="_blank"title='菜鸟教程https://www.runoob.com/'>菜鸟取色器</a></button><button><a href="https://blog.csdn.net/lulei5153?spm=1000.2115.3001.5343"target="_blank">csdn博客</a></button><button> <a href="https://w3schools.cn/" target="_blank">w3schools 教程</a></button><button><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩bilibili</a></button><button><a href="https://www.ixigua.com/" target="_blank">西瓜视频</a></button><button><a href="https://www.miyoushe.com/ys/" target="_blank">原神社区-米游社</a></button><button><ahref="https://webstatic.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,2,3,154,17,44,45,46,64,70,18,71,77,67,72,79,73¢er=2008.50,-1084.00&zoom=-3.00"target="_blank">原神大地图</a></button></main></main></main><div class="text"></div><script>var TextInputBox = document.querySelector(".text-input-box");var addto = document.querySelector(".addto");var text = document.querySelector(".text");addto.onclick = function () {inserhtml(TextInputBox.value, '');TextInputBox.value = '';TextInputBox.focus();savetodo();}var savetodo = function () {let todoarr = [];let todojs = {};var econtent = document.querySelectorAll('.content');for (let index = 0; index < econtent.length; index++) {todojs.name = econtent[index].innerHTML;todojs.finish = econtent[index].classList.contains('finish');todoarr.push(todojs);todojs = {};}save(todoarr);}var loadtodo = function () {let todoarr = load();for (let index = 0; index < todoarr.length; index++) {inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');}}var save = function (arr) {// 持久储存localStorage.todos = JSON.stringify(arr);}var load = function (arr) {var arr = JSON.parse(localStorage.todos);return arr;}text.onclick = function () {var tg = event.target;var tgkids = tg.parentElement.children;if (tgkids[0].checked) {tgkids[1].style.display = "block";tgkids[3].style.display = "none";tgkids[4].classList.remove("finish");}else {tgkids[4].classList.remove("finish");tgkids[1].style.display = "none";tgkids[2].style.display = "none";tgkids[3].style.display = "none";}if (tg.innerHTML == "选择删除") {tgkids[4].classList.add("finish");tgkids[1].style.display = "none";tgkids[2].style.display = "block";tgkids[3].style.display = "block";tgkids[3].onclick = function () {tg.parentElement.remove("");}}if (tg.innerHTML == "取消") {tgkids[0].checked = false;tgkids[1].style.display = "none";tgkids[2].style.display = "none";}savetodo();}var inserhtml = function (val, cls) {text.insertAdjacentHTML("beforeend",`<div><input type="checkbox"><button style="display: none">选择删除</button> <button style="display: none">取消</button> <button style="display: none">确定删除</button> <span class='content ${cls}'>${val}</span> </div>`)}loadtodo();/*********************一个html提示弹窗无需点击的函数 ******************************/function displayAlert(type, data, time) {var a = document.createElement("a");if (type == "info") {a.style.backgroundColor = "#990000";}a.id = "a";a.style.position = "absolute";a.style.width = "300px";a.style.height = "60px";a.style.marginLeft = "-100px";a.style.marginTop = "-30px";a.style.left = "30%";a.style.top = "15%";a.style.color = "white";a.style.fontSize = "25px";a.style.borderRadius = "20px";a.style.textAlign = "center";a.style.lineHeight = "60px";if (document.getElementById("a") == null) {document.body.appendChild(a);a.innerHTML = data;setTimeout(function () {document.body.removeChild(a);}, time);}}/*********************打开文件JavaScript部分 ******************************/var openBtn = document.getElementById("openButton");openBtn.addEventListener('click', function () {var filePath = prompt("请输入网站地址或者本地文件路径", "D:/前端学习");if (filePath) {window.open(filePath);} else {displayAlert("info", "未提供有效的文件路径！", 1500);}});/***************隐藏的备用信息页面的JS部分******************************/window.addEventListener("load", () => {const open = document.querySelector(".open");const close = document.querySelector(".close");const fillScreen = document.querySelector(".model-box");const header = document.querySelector(".title");const modelBox = document.querySelector(".content");open.addEventListener("click", () => {fillScreen.style.display = "block";});close.addEventListener("click", () => {fillScreen.style.display = "none";});header.addEventListener("mousedown", (event) => {const x = event.pageX - modelBox.offsetLeft;const y = event.pageY - modelBox.offsetTop;console.log(x, y);document.addEventListener("mousemove", move);function move(event) {modelBox.style.left = event.pageX - x + "px";modelBox.style.top = event.pageY - y + "px";}document.addEventListener("mouseup", () => {document.removeEventListener("mousemove", move);});});});</script>
</body></html>
)
