第7次修改了可刪除可持久保存的前端html備忘錄文章來源：http://www.zghlxwxcb.cn/news/detail-807491.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-807491.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 {
/* 塊級元素轉(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 {
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;
}
/* ---------------------------------------------*/
/* 設(shè)置checkbox點(diǎn)擊之后的樣式*/
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;
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方法可以自動計(jì)算數(shù)值 */
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;
/* 鼠標(biāo)移入呈現(xiàn)移動光標(biāo) */
cursor: move;
border-radius: 5px;
background-color: #a0eab0;
}
.model-box .content .title i {
/* i標(biāo)簽?zāi)J(rèn)是斜體 這個(gè)屬性可以變正 */
font-style: normal;
font-size: 50px;
color: #b1b4ba;
cursor: pointer;
margin-right: 10px;
line-height: 42px;
}
/*備用信息 X 鼠標(biāo)移入變色 */
.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="請輸入備忘內(nèi)容"></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="輸入網(wǎng)站地址" target="_blank">
輸入網(wǎng)站名稱
</a>
</u>
<bdi>^\s*(?=\r?$)\n
</bdi>
<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">原神社區(qū)-米游社</a></button>
<button><a
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();
/*********************一個(gè)html提示彈窗無需點(diǎn)擊的函數(shù) ******************************/
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("請輸入網(wǎng)站地址或者本地文件路徑", "D:/前端學(xué)習(xí)");
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>到了這里，關(guān)于第7次修改了可刪除可持久保存的前端html備忘錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
