第6次修改了可删除可持久保存的前端html备忘录:去掉第2页面
<!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;
padding: 0;
}
div input+button {
background-color: #fff666;
}
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,
dfn {
color: #efed6a;
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 3px 4px 5px rgba(255, 255, 255, 0.6),
inset -3px -4px 5px rgba(0, 0, 0, 0.6);
border-radius: 10px;
text-shadow: 3px 3px 3px #49b65ade;
}
u {
color: #fff;
border-radius: 10px;
background-color: #efed6a;
text-shadow:
1px 1px 2px #ddd,
2px 2px 2px #bbb,
3px 3px 2px #999,
4px 4px 2px #777;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.916);
}
button[ title]:hover:after {
content: attr(title);
color: #ff0808;
}
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 {
border: 0;
line-height: 2;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #def108;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
}
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);
border: 15px solid transparent;
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(237, 24, 9, 0.952);
}
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-decoration-color: transparent; */
text-underline-offset: 1px;
/* 添加过渡效果 */
transition: all 0.5s;
}
/* span添加hover事件 */
span:hover {
text-decoration-color: var(--checked);
text-underline-offset: 10px;
color: var(--checked);
}
/* 设置checkbox被选中之后span的样式 */
/* input[type="checkbox"]:checked~span {
/* color: var(--checked); */
/* color: #f6fa03; */
/* text-underline-offset: -5px;
text-decoration-color: #0a0000; */
/* text-decoration: line-through; */
/* background-color: var(--checked); */
/* background-color: #bf1313;
text-shadow: 2px 2px 2px rgb(211, 189, 184);
box-shadow: 0 0 10px 5px rgba(237, 209, 209, 0.963); */
/* } */
</style>
</head>
<body background="./我的桌面/yyds.jpg" style="background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%; ">
<h1>
<dfn>备忘录
</dfn>(memorandum)
</h1>
<u>
<a href="输入网站地址" target="_blank"
>输入网站名称
</a
>
</u>
<bdi>^\s*(?=\r?$)\n
</bdi>
<!-- <input type="file" > -->
<hr>
<textarea class="text-input-box" rows="1" cols="50%" placeholder="请输入备忘内容"></textarea><button type="text"
class="addto">添加</button><button id="openButton">打开URL</button>
<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.jd.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>
<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;
var yincang = document.querySelector('div button');
if (tgkids[0].checked == true) {
tgkids[1].style.display = "block";
tgkids[2].style.display = "block";
tgkids[3].style.display = "none";
tgkids[4].classList.remove("finish");
} else {
tgkids[1].style.display = "none";
tgkids[2].style.display = "none";
tgkids[3].style.display = "none";
tgkids[4].classList.remove("finish");
}
if (tg.innerHTML == "取消") {
location.reload();
}
if (tg.innerHTML == "选择删除") {
tgkids[4].classList.add("finish");
tgkids[3].style.display = "block";
tgkids[3].onclick = function () {
tg.parentElement.remove("");
savetodo();
}
}
}
var inserhtml = function (val, cls) {
text.insertAdjacentHTML("beforeend",
`<div>
<input type="checkbox">
<button>选择删除</button>
<button>取消</button>
<button>确定删除</button>
<span class='content ${cls}'>${val}</span>
</div>`
)
}
loadtodo();
//这是一个警告
// alert("alert：这是一个警告");
// <button title=''>删除</button>
// <!-- 打开文件JavaScript部分 -->
// 获取按钮元素
var openBtn = document.getElementById("openButton");
// 添加点击事件处理程序
openBtn.addEventListener('click', function () {
// 获取文件路径
// 这里假设您已经有一个函数来获取文件路径，例如 prompt('请输入文件路径', 'D:/前端学习', '_blank');
var filePath = prompt("请输入网站地址或者本地文件路径", "D:/前端学习");
if (filePath) {
// 使用window.location对象的assign()方法导航到指定文件
// window.location.assign(filePath);
// 或者使用window.open()方法打开新窗口导航到指定文件
window.open(filePath);
} else {
alert("未提供有效的文件路径！");
}
});
</script>
</body>
</html>
