修改留言板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>备忘录</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
body {
background: #0b1b2c;
}
input,
button {
color: #d6d301;
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
li {
list-style: none;
}
}
/* 设置全局样式 结束*/
/* 头部区域header */
header {
width: 100vw;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #cbcbcb;
&::before {
content: "";
background-color: #cbcbcb;
width: 15px;
height: 100%;
position: fixed;
right: 1px;
top: 40px;
z-index: 110;
}
/* logo */
figure.logo {
width: 190px;
height: 50px;
/* 缩小 */
transform: scale(0.8);
margin-top: 2px;
margin-left: -15px;
border-radius: 50%;
background: #f30303;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
z-index: 99;
figcaption {
background: hsl(0, 0%, 0%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 45px;
border-radius: 50%;
font-size: 40px;
width: 152px;
}
.my_name1 {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
transform: translate(0%, 0%);
}
.my_name2 {
text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(0%, -93%);
}
img {
width: 60px;
height: 35px;
margin-top: 7px;
margin-left: 130px;
border-radius: 50%;
transition: transform 0.3s ease;
position: absolute;
&:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
}
/* 时间 */
time {
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
/* 天气样式无效
iframe {
font-size: 2rem;
color: #f30303;
} */
/* 全屏还原关闭按钮 */
menu {
display: flex;
button {
background: none;
border: none;
}
img {
width: 35px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
&:hover {
transform: scale(1.2);
padding: 5px;
background: #ffd000;
}
}
button:nth-child(2) {
display: none;
/* 放大镜效果 */
transform: scale(1.16);
}
}
}
/* 头部区域header 结束 */
/* 中间区域main样式 */
main {
width: 100vw;
height: 96vh;
position: absolute;
top: 4%;
display: flex;
justify-content: center;
/* 左侧导航栏 */
aside.aside_left {
width: 6vw;
height: 96vh;
position: relative;
section {
width: 100%;
height: 98%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-evenly;
&::before {
content: "";
width: 15px;
height: 100%;
position: absolute;
z-index: 120;
background-color: #cbcbcb;
}
article {
height: calc(100% / 3.5);
width: 320%;
position: relative;
z-index: 100;
transform: translateX(-70%);
transition: transform .5s ease-in-out;
button {
width: 35%;
height: 100%;
font: 800 80px '';
background-color: #cbcbcb;
border: none;
transition: background-color .5s ease-in-out;
box-shadow: 0 0 10px rgb(200, 255, 3);
color: rgb(70, 100, 180);
&:hover {
cursor: pointer;
}
}
p {
position: absolute;
/* 使用渐变背景*/
/* background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); */
/*将背景剪切成文字的形状*/
background-clip: text;
-webkit-background-clip: text;
/*文字颜色设为透明，使文字与背景融为一体*/
-webkit-text-fill-color: transparent;
font-size: 90px;
font-weight: 900;
right: -15px;
/* 文本竖排 */
writing-mode: vertical-rl;
top: calc(50% - 100px);
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
}
}
article.active {
transform: translateX(0);
}
button.active {
color: #feee02d7;
}
}
}
/* 左侧导航栏 结束 */
/* 滑动栏 */
#bar {
position: absolute;
left: 6vw;
height: 98%;
width: 2px;
z-index: 99;
/* background-color: rgb(255, 249, 249); */
p {
position: absolute;
height: calc(100% / 4);
width: 10px;
top: 0px;
left: -1.2px;
background: rgb(250, 4, 168);
transition: transform .5s ease-in-out;
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;
&::before {
content: "";
position: absolute;
height: calc(100% / 1);
width: 10px;
left: -1px;
background: rgb(250, 4, 4);
transition: transform .5s ease-in-out;
border-radius: 10px;
box-shadow: 0 0 10px rgb(200, 255, 3);
}
}
}
/* 滑动栏 结束*/
/* 分页设置 */
#card-section {
height: 100%;
width: 90%;
overflow: hidden;
}
/* 分页设置 结束*/
/* 中间留言区 */
table {
width: 86vw;
margin: 1px 2px;
box-shadow: 0 0 10px rgb(200, 255, 3);
.titleBtn {
display: flex;
color: #E6A23C;
text-align: center;
td {
height: 24px;
}
.displayBtn {
background: #0bb811c9;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
width: 30vw;
cursor: pointer;
font-weight: bold;
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
marquee {
background: linear-gradient(to right, #4caf4fed, #dc0000cf);
color: #f3d303;
margin: 0;
padding: 0;
width: 26vw;
height: 24px;
}
/* 删除按钮 */
.deleteBtn {
color: #f3d303;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
background: #ff0000;
font-weight: bold;
cursor: pointer;
width: 30vw;
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
}
}
/* 隐藏的输入框*/
.myDialog {
position: fixed;
top: 6vw;
left: 10vw;
background: #2c3e50;
box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);
border-radius: 8px;
border: 0;
.dialog-form {
color: azure;
box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);
display: flex;
justify-content: space-between;
padding: 5px;
cursor: move;
button {
background: #ff000004;
border: none;
font-size: 30px;
/* 放大镜效果 */
transform: scale(1.6);
margin: 0 5px;
&:hover {
background-color: #f30303;
width: 30px;
height: 28px;
border-top-right-radius: 5px;
}
}
}
.textarea-form {
input[type="file"] {
box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);
margin: 5px;
}
sub {
color: #ffffff;
user-select: text;
}
section {
display: flex;
input,
button {
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
/* 文本竖排 */
writing-mode: vertical-rl;
/* 文字间距 */
letter-spacing: 20px;
font-size: 25px;
padding-right: 5px;
}
textarea {
background: #0b1b2c;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px #0a0000;
/* background: #144756bd; */
font-size: 1.2rem;
&::placeholder {
text-align: center;
}
}
}
}
}
/* 隐藏的输入框 结束 */
/* 留言列表 */
output {
border: 2px solid rgb(134, 133, 133);
background-color: #144756;
width: 85vw;
height: 91vh;
margin-left: 10px;
border-radius: 10px;
display: flex;
align-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
overflow-x: hidden;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
pre,
span {
user-select: text;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
margin: 10px;
border-radius: 5px;
text-align: center;
&:hover {
color: #f85f5faf;
background-color: #1b657b4b;
text-shadow: 1px 1px 1px #030303;
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
}
.href {
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
padding: 2px;
border-radius: 3px;
}
.finish {
background-color: rgb(191, 210, 255);
color: rgb(255, 250, 250);
text-shadow: 1px 1px 1px #030303;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
a {
text-decoration: none;
color: #ebf704;
}
}
/* 中间留言区 结束*/
/* 右侧边栏网站收藏 */
aside.aside_right {
color: #ffffff;
flex-wrap: wrap;
overflow-x: hidden;
width: 8vw;
li {
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
background-color: #f9f9f90c;
margin: 5px;
padding: 2px;
border-radius: 3px;
cursor: pointer;
&:hover {
background-color: #f3d303;
}
a {
font-size: 18px;
color: hsla(160, 100%, 37%, 1);
text-shadow: 1px 1px 1px #100000;
/* 去掉下划线 */
text-decoration: none;
&:hover {
color: #f85f5faf;
display: block;
transform: scale(1.2);
/* 文本居中 */
text-align: center;
}
}
}
}
/* 右侧边栏网站收藏 结束*/
}
/* 中间区域main样式 结束 */
/* 底部footer样式 */
footer {
background-color: #cbcbcb;
width: 100vw;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
a {
color: #d6d301;
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
}
/* 底部footer样式 结束 */
</style>
</head>
<body>
<!-- 头部区域header -->
<header>
<!-- logo -->
<figure class="logo">
<a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
target="_blank">
<img src="file:///D:/img/icon.ico" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
</figure>
<!-- 时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time>
<!-- 天气 -->
<iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&id=99">
</iframe>
<!-- 全屏还原关闭按钮 -->
<menu>
<button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"
onclick="fullScreen()"></button>
<button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
onclick="exitFullScreen()"></button>
<button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button>
</menu>
</header>
<!-- 头部区域header 结束 -->
<!-- 中间区域 main -->
<main>
<!-- 左侧导航栏 -->
<aside class="aside_left">
<section>
<article class="active">
<button onclick="slideTo(1)" class="active">首页
<p>首页</p>
</button>
</article>
<article>
<button onclick="slideTo(2)">英语
<p>英语</p>
</button>
</article>
<article>
<button onclick="slideTo(3)">音乐
<p>音乐</p>
</button>
</article>
<article>
<button onclick="slideTo(4)">项目
<p>项目</p>
</button>
</article>
</section>
</aside>
<!-- 左侧导航栏 结束-->
<!-- 滑动栏 -->
<article id="bar">
<p></p>
</article>
<!-- 滑动栏 结束-->
<!-- 中间留言区 -->
<section id="card-section">
<!-- 第一页：首页 -->
<article id="card1">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog.show()">编辑首页页面按钮
</td>
<td>
<marquee behavior="alternate" direction="right">首页杂记 </marquee>
</td>
<td id="delete1" class="deleteBtn">删除首页页面按钮
</td>
</tr>
<tr>
<td>
<!-- <dialog> 元素的 open 属性设置为 true，表示对话框在页面加载时默认打开 -->
<!-- <dialog id="myDialog" class="myDialog" open> -->
<dialog id="myDialog" class="myDialog">
<article class="dialog-form" id="Drag">
<h2>这是一个弹窗留言输入框</h2> <button onclick="myDialog.close()">×</button>
</article>
<form class="textarea-form">
<input type="file" name="file1"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<section>
<input type="reset" value="重置">
<textarea class="textarea1" name="textarea1" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text1">添加</button>
</section>
</form>
</dialog>
<output id="memo1"></output>
</td>
</tr>
</table>
</article>
<!-- 第一页：首页 结束-->
<!-- 第二页：英语 -->
<article id="card2">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog2.show()">编辑英语页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">英语杂记 </marquee>
</td>
<td id="delete2" class="deleteBtn">删除英语页面按钮 </td>
</tr>
<tr>
<td>
<dialog id="myDialog2" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag2">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file2"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<section>
<input type="reset" value="重置">
<textarea class="textarea2" name="textarea2" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text2">添加</button>
</section>
</form>
</dialog>
<output id="memo2"></output>
</td>
</tr>
</table>
</article>
<!-- 第二页：英语 结束 -->
<!-- 第三页：音乐 -->
<article id="card3">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog3.show()">编辑音乐页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">音乐杂记 </marquee>
</td>
<td id="delete3" class="deleteBtn">删除音乐页面按钮</td>
</tr>
<tr>
<td>
<dialog id="myDialog3" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag3">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file3"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<section>
<input type="reset" value="重置">
<textarea class="textarea3" name="textarea3" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text3">添加</button>
</section>
</form>
</dialog>
<output id="memo3"></output>
</td>
</tr>
</table>
</article>
<!-- 第三页：音乐 结束 -->
<!-- 第四页：项目 -->
<article id="card4">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog4.show()">编辑项目页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">项目杂记 </marquee>
</td>
<td id="delete4" class="deleteBtn"> 删除项目页面按钮</td>
</tr>
<tr>
<td>
<dialog id="myDialog4" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag4">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file4"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea4" name="textarea4" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text4">添加</button>
</section>
</form>
</dialog>
<output id="memo4"></output>
</td>
</tr>
</table>
</article>
<!-- 第四页：项目 结束-->
</section>
<!--中间留言区 结束 -->
<!-- 右侧边栏 -->
<aside class="aside_right">
<h2> 网站收藏</h2>
<details class="webList">
<summary>
收藏列表
</summary>
</details>
<details class="localList">
<summary>
本地列表
</summary>
</details>
</aside>
<!-- 右侧边栏 结束-->
</main>
<!-- 中间区域main 结束-->
<!-- 页脚 -->
<footer>
<a href="https://blog.csdn.net/lulei5153" target="_blank">作者：与妖为邻</a>
<script>
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const dayOfWeek = days[date.getDay()];
return `${year}-${month}-${day} ${dayOfWeek} ${hours}:${minutes}:${seconds}`;
}
document.write(formatDate(new Date));
</script>
</footer>
<!-- 页脚 结束-->
<script>
/* 现在时间*/
var current_time = document.getElementById("dateTime");
function showTime() {
var now = new Date();
var year = now.getFullYear();
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var day = ("0" + now.getDate()).slice(-2);
var hour = ("0" + now.getHours()).slice(-2);
var min = ("0" + now.getMinutes()).slice(-2);
var second = ("0" + now.getSeconds()).slice(-2);
var week = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
][now.getDay()];
var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
current_time.innerHTML = time;
}
showTime();
setInterval(showTime, 1000);
/* 现在时间 结束*/
/* 全屏功能与关闭*/
function fullScreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
// 获取全屏和还原按钮
var fullScreenBtn = document.querySelector(".fullScreen");
var exitFullScreenBtn = document.querySelector(".exitFullScreen");
// 监听全屏和还原事件
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
fullScreenBtn.style.display = "none";
exitFullScreenBtn.style.display = "block";
} else {
fullScreenBtn.style.display = "block";
exitFullScreenBtn.style.display = "none";
}
});
// 关闭当前窗口
function closeAll() {
window.close();
}
/* 全屏功能与关闭 结束*/
/* 左侧导航 */
// 定义变量
let chosenSlideNumber = 1; // 当前选择的幻灯片编号
let offset = 0; // 幻灯片偏移量
let barOffset = 0; // 导航条偏移量
// 切换抽屉面板和按钮状态
function toggleDrawer(previous, current) {
const drawerBoxes = document.querySelectorAll(".aside_left article");
const drawerBtnS = document.querySelectorAll(".aside_left button");
drawerBoxes[previous - 1].classList.toggle("active");
drawerBoxes[current - 1].classList.toggle("active");
drawerBtnS[previous - 1].classList.toggle("active");
drawerBtnS[current - 1].classList.toggle("active");
}
// 移动导航条
function moveBar(barOffset) {
const bar = document.querySelector("#bar p");
bar.style.transform = `translateY(${barOffset}%)`;
}
// 切换到指定编号的幻灯片
function slideTo(slideNumber) {
let previousSlideNumber = chosenSlideNumber;
// 更新偏移量
chosenSlideNumber = slideNumber;
let slideDelta = (slideNumber - previousSlideNumber) * 100;
offset -= slideDelta; // 计算幻灯片偏移量
barOffset += slideDelta; // 计算导航条偏移量
// 切换抽屉面板和按钮状态
toggleDrawer(previousSlideNumber, slideNumber);
// 移动幻灯片和导航条
moveSlides(offset);
moveBar(barOffset);
}
// 移动幻灯片
function moveSlides(offset) {
const slides = document.querySelectorAll("#card-section article");
slides.forEach((slide) => {
slide.style.transform = `translateY(${offset}%)`;
});
}
/*左侧导航结束*/
/*留言内容*/
document.addEventListener("DOMContentLoaded", function () {
const todoContainers = [
{ textarea: ".textarea1", button: ".abb-text1", container: "#memo1", storageKey: "home" },
{ textarea: ".textarea2", button: ".abb-text2", container: "#memo2", storageKey: "newEnglish" },
{ textarea: ".textarea3", button: ".abb-text3", container: "#memo3", storageKey: "newMusic" },
{ textarea: ".textarea4", button: ".abb-text4", container: "#memo4", storageKey: "newProject" },
];
todoContainers.forEach(({ textarea, button, container, storageKey }) => {
const upText = document.querySelector(textarea);
const addTo = document.querySelector(button);
const memo = document.querySelector(container);
addTo.addEventListener("click", function () {
if (upText.value.trim() !== "") {
insertHtml(memo, upText.value, "");
upText.value = "";
upText.focus();
saveTodo();
} else {
alert("内容为空，无法添加！");
}
});
function saveTodo() {
let todoArr = Array.from(memo.querySelectorAll(".JS_content")).map(
(content) => ({
name: content.innerHTML,
finish: content.classList.contains("finish"),
})
);
localStorage.setItem(storageKey, JSON.stringify(todoArr));
}
function loadTodo() {
try {
let todoArr = JSON.parse(localStorage.getItem(storageKey) || "[]");
todoArr.forEach((todo) => {
insertHtml(memo, todo.name, todo.finish ? "finish" : "");
});
} catch (e) {
console.error(`Failed to load todo for ${storageKey}`, e);
}
}
memo.addEventListener("click", function (event) {
const target = event.target;
const tgKids = target.parentElement.children;
if (tgKids[0].checked) {
tgKids[1].classList.add("finish");
} else {
tgKids[1].classList.remove("finish");
}
saveTodo();
});
document
.getElementById(
`delete${button === ".abb-text" ? "" : button.match(/\d+/)[0]}`
)
.addEventListener("click", function () {
const checkedBoxes = memo.querySelectorAll("input[name='checkbox']:checked");
if (checkedBoxes.length === 0) {
alert("没有选择任何项目");
} else {
if (confirm("是否删除所选？")) {
checkedBoxes.forEach((checkbox) => {
checkbox.parentElement.remove();
});
saveTodo();
}
}
});
function insertHtml(target, val, cls) {
target.insertAdjacentHTML(
"beforeend",
`<div class='dddd'>
<input type="checkbox" name='checkbox'>
<span class='JS_content ${cls}'>${val}</span>
</div>`
);
}
// 在页面加载时调用持久化存储的loadTodo()函数
loadTodo();
});
});
/*本地文件上传添加按钮*/
window.onload = function () {
var setups = [
{ textName: "textarea1", fileName: "file1" },
{ textName: "textarea2", fileName: "file2" },
{ textName: "textarea3", fileName: "file3" },
{ textName: "textarea4", fileName: "file4" },
];
setups.forEach(function (setup) {
var text = document.getElementsByName(setup.textName)[0];
var inputFile = document.getElementsByName(setup.fileName)[0];
if (text && inputFile) {
// 检查元素是否存在
inputFile.onchange = function () {
var reader = new FileReader();
reader.readAsText(this.files[0], "UTF-8");
reader.onload = function () {
text.value = this.result;
};
reader.onerror = function () {
console.error("Failed to read file: " + reader.error);
alert("Failed to read file. Please try again.");
};
};
}
});
};
/*本地文件上传添加按钮 结束*/
/* 右侧边栏网站收藏 */
const webList = document.querySelector(".webList");
const localList = document.querySelector(".localList");
const webLinks = [
{ title: "智能翻译", src: "https://fanyi.baidu.com" },
{ title: "哔哩哔哩", src: "https://www.bilibili.com" },
{ title: "百度一下，你就知道", src: "https://www.baidu.com" },
{ title: "菜鸟教程", src: "https://www.runoob.com/" },
{ title: "Electron中文网", src: "https://www.electronjs.org/zh/docs/latest/" },
{ title: "制作ico图标", src: "https://www.bitbug.net" },
{ title: "Element组件", src: "https://element-plus.org/zh-CN/" },
{ title: "原神大地图", src: "https://act.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,508,2¢er=2008.50,-1084.00&zoom=-3.00" },
{ title: "vue.js", src: "https://cn.vuejs.org/" },
{ title: "w3schools教程", src: "https://www.w3ccoo.com/" },
{ title: "现代JS教程", src: "https://zh.javascript.info/" },
{ title: "CSS3D字体", src: "https://www.dedexuexi.com/tool/3D/" },
{ title: "MDN网络文档", src: "https://developer.mozilla.org/zh-CN/" },
{ title: "UI组件", src: "https://uiverse.io/switches" },
{ title: "IconFont图标", src: "https://www.iconfont.cn/" },
{ title: "vue图标", src: "https://vue-icons.kalimah-apps.com/" },
{ title: "GitHub", src: "https://github.com" },
];
const localLinks = [
{ title: "myLogs备忘录", src: "file:///D:/web/备忘录/html备忘录/html/myLogs备忘录.html" },
{ title: "简单的计算器", src: "file:///D:/web/备忘录/html备忘录/html/简单的计算器.html" },
{ title: "html表格", src: "file:///D:/web/备忘录/html备忘录/html/html表格.html" },
{ title: "js生成随机数", src: "file:///D:/web/备忘录/html备忘录/html/js生成随机数.html" },
{ title: "html5代码账号密码备忘录样本", src: "file:///D:/web/备忘录/html备忘录/html/html5代码账号密码备忘录样本.html" },
{ title: "特别的时钟特别的倒计时", src: "file:///D:/web/备忘录/html备忘录/html/特别的时钟特别的倒计时.html" },
{ title: "查看key值页面", src: "file:///D:/web/备忘录/html备忘录/html/真/查看key值页面.html" },
];
const createLink = (title, src) => {
if (!title || !src) {
console.error("链接缺少必要的属性");
return null;
}
const link = document.createElement("a");
link.href = src;
link.target = "_blank";
link.innerText = title;
return link;
};
const createList = (list, parent) => {
if (!parent) {
console.error("父元素未找到");
return;
}
const ul = document.createElement("ul");
list.forEach((item) => {
const link = createLink(item.title, item.src);
if (link) {
const li = document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
});
parent.appendChild(ul);
};
createList(webLinks, webList);
createList(localLinks, localList);
/* 右侧边栏网站收藏 结束 */
/* 通用的拖动功能 */
/* 通用的拖动功能 */
const initDragAndDisplay = (hiddenElementId, dragElementId) => {
const hiddenElement = document.querySelector(hiddenElementId);
document.querySelector(dragElementId).addEventListener("mousedown", (e) => {
const x = e.pageX - hiddenElement.offsetLeft;
const y = e.pageY - hiddenElement.offsetTop;
const move = (e) => {
hiddenElement.style.left = e.pageX - x + "px";
hiddenElement.style.top = e.pageY - y + "px";
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
}, { once: true });
});
};
/* 初始化所有的拖动按钮 */
const initAllDragsAndDisplays = () => {
["", "2", "3", "4"].forEach((num) => {
initDragAndDisplay(`#myDialog${num}`, `#Drag${num}`);
});
};
initAllDragsAndDisplays();
/* 4个拖动按钮的实现结束*/
</script>
</body>
</html>原文地址：https://blog.csdn.net/lulei5153/article/details/140367792
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！