第6次修改了可刪除可持久保存的前端html備忘錄:去掉第2頁面文章來源：http://www.zghlxwxcb.cn/news/detail-798647.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-798647.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;
padding: 0;
}
div input+button {
background-color: #fff666;
}
div input+button+button {
background-color: #47eb0b;
}
div>button {
display: none;
}
form,
h1 {
/* 塊級元素轉(zhuǎn)行內(nèi)元素 ；行內(nèi)轉(zhuǎn)塊：display:block; 塊、行內(nèi)元素轉(zhuǎn)換行內(nèi)塊：display:inline-block;*/
display: inline;
}
button,
h1,
input {
/* 禁止元素選中； 解除文本選中user-select: text;*/
user-select: none;
}
/* 完成樣式 */
.finish {
/* 文本-裝飾：刪除線 */
text-decoration: line-through;
/* 文本陰影：水平偏移量 垂直偏移量 模糊距離 陰影顏色 */
/* 陰影效果：水平偏移量 垂直偏移量 模糊距離 陰影顏色 內(nèi)陰影 */
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;
}
/* ---------------------------------------------*/
/* 設(shè)置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;
}
/* 重新設(shè)置span的樣式 */
span {
text-decoration-color: #bf1313;
/* 設(shè)置底部線條顏色為透明色 */
/* 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);
}
/* 設(shè)置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="輸入網(wǎng)站地址" target="_blank"
>輸入網(wǎng)站名稱
</a
>
</u>
<bdi>^\s*(?=\r?$)\n
</bdi>
<!-- <input type="file" > -->
<hr>
<textarea class="text-input-box" rows="1" cols="50%" placeholder="請輸入備忘內(nèi)容"></textarea><button type="text"
class="addto">添加</button><button id="openButton">打開URL</button>
<hr>
<button><a target="_blank">百度一下</a></button>
<button><a target="_blank"
title='菜鳥教程https://www.runoob.com/'>菜鳥取色器</a></button>
<button><a target="_blank">csdn博客</a></button>
<button> <a target="_blank">w3schools 教程</a></button>
<button><a target="_blank">嗶哩嗶哩bilibili</a></button>
<button><a target="_blank">西瓜視頻</a></button>
<button><a target="_blank">京東</a></button>
<button><a target="_blank">原神社區(qū)-米游社</a></button>
<button><a
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 () {
// 獲取文件路徑
// 這里假設(shè)您已經(jīng)有一個函數(shù)來獲取文件路徑，例如 prompt('請輸入文件路徑', 'D:/前端學(xué)習(xí)', '_blank');
var filePath = prompt("請輸入網(wǎng)站地址或者本地文件路徑", "D:/前端學(xué)習(xí)");
if (filePath) {
// 使用window.location對象的assign()方法導(dǎo)航到指定文件
// window.location.assign(filePath);
// 或者使用window.open()方法打開新窗口導(dǎo)航到指定文件
window.open(filePath);
} else {
alert("未提供有效的文件路徑！");
}
});
</script>
</body>
</html>到了這里，關(guān)于【無標(biāo)題】【第6次修改了可刪除可持久保存的前端html備忘錄:去掉第2頁面可誤刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
