第7次修改了可删除可持久保存的前端html备忘录
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><a
href="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>