自建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>首页</title>
<!-- 引入 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<!-- <link rel="stylesheet" href="分页共享的shared.css"> -->
<!-- <link rel="stylesheet" href="登录界面样式.css"> -->
<!-- <link rel="stylesheet" href="头部的样式.css"> -->
<!-- <link rel="stylesheet" href="网站页面的样式.css"> -->
<!-- <link rel="stylesheet" href="倒计时页面的样式.css"> -->
<!-- <script src="分页共享的js.js"></script> -->
<!-- <script src="网站收藏js.js" defer></script> -->
<style>
* {
/* 禁止文本选中 */
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 登录界面样式 开始 ---------------------------------------*/
html,
body {
height: 100%;
}
body {
display: flex;
}
.wrapper {
/* display: none; */
width: 100%;
background-image: url('file:///D:/img/开门.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
transform: scale(1.5);
width: 525px;
height: 300px;
display: flex;
position: relative;
border-radius: 8px;
margin: 19% auto;
border: 1px solid rgba(255, 255, 255, 6);
background-image: linear-gradient(to top left,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0));
backdrop-filter: blur(4px);
box-shadow:
inset 4px 4px 3px rgba(255, 255, 255, 0.6),
inset -4px -4px 3px rgba(0, 0, 0, 0.6);
}
.welcome-box {
width: calc(525px / 2);
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 5px;
transition: 0.5s ease-in-out;
border-radius: 8px 0 0 8px;
background-image: url('file:///D:/img/左.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
z-index: 9;
}
p,
h1 {
color: rgb(255, 255, 255);
}
.welcome-box h1 {
margin-top: 45px;
text-align: center;
letter-spacing: 5px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.welcome-box p {
height: 25px;
line-height: 25px;
text-align: center;
margin: 10px 0;
font-weight: bold;
text-shadow: 2px 2px 2px #100000;
}
.image-container {
width: 100px;
height: 100px;
margin: 10px auto;
border-radius: 50%;
overflow: hidden;
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);
text-shadow: 1px 1px 1px #100000;
}
.image-container img {
width: 100%;
height: 100%;
}
.form-container {
margin: 120px auto;
}
.form-container,
.registration-container {
flex: 1;
height: 100%;
margin: 40px auto;
}
.title-container {
height: 50px;
line-height: 4px;
}
.title-container h1 {
text-align: center;
letter-spacing: 5px;
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);
text-shadow: 1px 1px 1px #100000;
}
.input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.input-group input {
width: 60%;
height: 25px;
margin-bottom: 20px;
text-indent: 4px;
border-radius: 3px;
box-shadow: 0px 0px 5px 5px #f7c750;
}
.input-group input::placeholder {
color: rgb(36, 192, 127);
letter-spacing: 25px;
font-size: 15px;
}
.form-container input[type="password"] {
transform: translateY(20px);
}
.input-group input:focus {
color: rgb(61, 185, 71);
}
.button-container {
display: flex;
justify-content: center;
}
.form-container .button-container {
margin-top: 45px;
}
.button-container button {
width: 100px;
height: 30px;
margin: 0 3px;
border: none;
border-radius: 3px;
color: #fff;
background-color: #2196F3;
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);
text-shadow: 1px 1px 1px #100000;
}
.register-btn {
background-color: #4CAF50;
}
.button-container p {
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 14px;
background-color: #f56c6c;
border-radius: 3px;
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);
text-shadow: 1px 1px 1px #d3bfbf;
}
.button-container button:hover,
.button-container p:hover {
cursor: pointer;
/* opacity: 0.6; */
background-color: rgb(251, 16, 16);
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);
}
.button-container p:active,
.button-container button:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
/* 登录界面样式 结束 */
/* 登录后的样式 ------------------------------------------------------*/
#mask {
display: none;
width: 100%;
transition: background-color 0.3s, color 0.3s;
background: #0b1b2c;
/* 默认背景色 */
color: #ffffff;
/* 分页设置 */
.content {
/* 没有选择链接的分页内容 */
display: none;
}
.active {
/* 选择链接的分页内容 */
display: block;
}
.content p {
background-color: #144756;
color: #f56c6c;
text-shadow: 1px 1px 1px #000000;
}
/* 分页设置结束 */
}
/* 头部 */
header {
width: 100vw;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #cbcbcb;
/* logo */
.logoBox {
width: 110px;
margin: 0 10px;
}
figure .logo {
width: 202px;
height: 50px;
/* 缩小 */
transform: scale(0.8);
margin-top: 2px;
margin-left: -22px;
border-radius: 3px;
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 rgb(216 216 216 / 55%), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 46px;
border-radius: 3px;
font-size: 31px;
width: 118px;
}
.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(35%, 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(35%, -93%);
}
img {
width: 60px;
transition: transform 0.3s ease;
position: absolute;
}
.kong {
margin-top: -10px;
margin-left: 148px;
transform: scale(0.8);
&:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
.ying {
top: 0px;
margin-left: -8px;
transform: scale(1.6);
&:hover {
transform: scale(2.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
}
/* 时间 */
#dateTime1 {
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;
}
}
/* 显示复选框10秒倒计时 */
.countdownWithZero {
color: rgb(255, 255, 255);
background-color: black;
}
}
/* 导航栏 */
nav {
background-color: #cbcbcb;
padding: 5px;
}
nav a {
color: #007bff;
padding: 6px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
nav a:hover {
background: #0b1b2c8e;
color: white;
backdrop-filter: blur(5px);
}
.nav-active {
display: inline-block;
transform: scale(1.6);
transform-origin: center;
margin-left: 10px;
padding: 0 3px 5px 3px;
border-radius: 1px;
background: #0b1b2c;
color: white;
text-shadow: 1px 1px 1px #000000;
}
header button {
font-size: 22px;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
#showCheckboxesButton {
background-color: #ffbb66;
color: white;
text-shadow: 1px 1px 1px #000000;
}
.logout-btn {
background-color: #ff0909b8;
color: rgb(248, 227, 2);
text-shadow: 1px 1px 1px #000000;
}
/* 导航栏 结束*/
/* 头部 结束 */
/* <!-- ------------分页共享样式---------------------------------------- --> */
/* 中间留言区 */
table {
width: 100%;
margin: 0;
padding: 0;
.titleBtn {
display: flex;
text-align: center;
td {
height: 24px;
width: 100%;
}
.displayBtn {
color: #67C23A;
background: #0bb811c9;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
/* width: 30vw; */
cursor: pointer;
font-weight: bold;
&:hover {
background-color: #f3d303;
color: #e6a23c;
}
}
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;
z-index: 999;
opacity: 0.9;
.dialog-form {
box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);
display: flex;
justify-content: space-between;
padding: 5px;
cursor: move;
h2 {
color: #ffffffaf;
text-shadow: 1px 1px 1px #030303;
}
/* 关闭按钮 */
span {
background: #456e7d;
border: none;
font-size: 28px;
/* 放大镜效果 */
transform: translate(20%, 5%) scale(1.6);
/* 粗字体 */
font-weight: bold;
margin: 1px 9px;
width: 28px;
padding: 0;
height: 28px;
border-top-right-radius: 5px;
color: #fea501;
/* 行高 */
line-height: 28px;
&:hover {
background-color: #f30303;
color: #fafe01;
}
}
}
.textarea-form {
background-color: #144756;
/* 修改数据器按钮 */
#readFolder {
font-size: 18px;
color: #67c23a;
text-shadow: 1px 1px 1px #070707;
cursor: pointer;
}
/* 编辑文本按钮 */
#toolbar {
margin: 0 5px 5px 5px;
button {
font-size: 18px;
/* background-color: hsla(160, 100%, 37%, 0.63); */
/* border: 1PX solid #909399; */
padding: 1PX;
border-radius: 2PX;
&:hover {
cursor: pointer;
background-color: rgb(0, 0, 0);
color: #ffffff;
}
}
/* 编辑文本输入框 */
#editor {
background-color: #ffffff;
border: #f9d400 2px solid;
margin: 5px;
padding: 10px;
border-radius: 5px;
/* 最大高度 */
max-height: 500px;
/* 滚动条 */
overflow-y: auto;
color: #000000;
text-shadow: 0px 0px 0px #070707;
}
}
input[type="file"] {
box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);
margin: 5px;
}
sub {
color: #67C23A;
text-shadow: 1px 1px 1px #0a0000;
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: 10px;
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);
}
textarea {
background: #0b1b2c;
/* color: hsla(160, 100%, 37%, 0.63); */
color: #ffffff;
text-shadow: 2px 2px 1px #0a0000;
/* background: #144756bd; */
font-size: 1.2rem;
background-image: url('file:///D:/img/开门.png');
/* 替换为你的图片路径 */
background-size: cover;
/* 使背景图片覆盖整个元素 */
background-position: center;
/* 设置背景图片的位置为中心 */
&::placeholder {
text-align: center;
/* color: #67C23A; */
color: #e1ff00;
text-shadow: 1px 1px 1px #0a0000;
}
}
}
}
}
/* 隐藏的输入框 结束 */
/* 留言内容布局 */
@keyframes backgroundChange {
0% {
background-image: url('file:///D:/img/706.png');
}
20% {
background-image: url('file:///D:/img/771.png');
}
40% {
background-image: url('file:///D:/img/772.png');
}
60% {
background-image: url('file:///D:/img/773.png');
}
80% {
background-image: url('file:///D:/img/774.png');
}
100% {
background-image: url('file:///D:/img/706.png');
}
}
output {
/* 你原本的样式 */
opacity: 0.8;
border: 2px solid rgb(134, 133, 133);
background-color: #144756;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
width: 99vw;
height: 91vh;
margin: 1px 5px;
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);
animation: backgroundChange 10s infinite;
/* 设置动画，时间可以根据需要调整 */
/* 留言内容布局 结束*/
/* 留言内容字体样式 */
.Success {
input[type="checkbox"] {
display: none;
}
.Message {
color: #67c23a;
text-shadow: 1px 1px 1px #000;
margin: 10px;
padding: 0 5px;
border-radius: 5px;
text-align: center;
user-select: text;
* {
user-select: text;
}
&:hover {
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);
}
}
pre:hover {
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);
}
.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);
/* 删除线 */
text-decoration: line-through;
text-decoration-color: #c23a3a;
text-decoration-thickness: 2px;
}
a {
text-decoration: none;
/* 去掉下划线 */
transform: translate(2px, 2px);
border-radius: 4px;
background-color: rgba(255, 0, 0, 0.831);
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));
backdrop-filter: blur(5px);
width: fit-content;
font-size: 22px;
color: #ebf704;
text-shadow: 1px 1px 1px #100000;
padding: 5px;
box-shadow:
inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
}
}
}
/* <!-- ------------分页共享样式 结束---------------------------------------- --> */
/* 网页页面布局 */
#memo3 {
width: auto;
height: 10vh;
}
.webPageTit {
border: #f39703 solid 5px;
padding: 2px;
.Success {
margin-top: 8px;
}
}
.webList,
.localList {
display: flex;
}
.webList li,
.localList li {
margin: 5px;
height: 50px;
display: inline-block;
background-color: #00000055;
padding: 2px 5px;
border-radius: 3px;
backdrop-filter: blur(2px);
width: fit-content;
cursor: pointer;
&::before {
content: "";
display: block;
height: 100%;
width: 50%;
position: absolute;
top: 0;
left: 50%;
z-index: -1;
transition: all 0.3s ease-in-out;
background-color: #ffbb66;
filter: blur(15px);
}
&::after {
content: "";
display: block;
height: 100%;
width: 50%;
position: absolute;
font-size: 30px;
top: 0;
left: 0%;
z-index: -1;
transition: all 0.3s ease-in-out;
background-color: #ff2233;
filter: blur(15px);
}
&:hover {
background-color: #f3d303;
}
a {
background-color: #00000055;
backdrop-filter: blur(5px);
width: fit-content;
font-size: 25px;
color: rgb(254, 254, 254);
text-shadow: 1px 1px 1px #100000;
/* 去掉下划线 */
text-decoration: none;
margin: 0px;
padding: 5px;
}
}
/* 网页页面布局 结束*/
/* 倒计时页面布局 */
#memo4 {
width: auto;
height: 10vh;
}
.countdownTit {
border: #f39703 solid 5px;
padding: 2px;
}
.countdownContainer {
width: 100%;
display: flex;
/* flex-direction: column; */
align-items: center;
margin: 1px;
padding: 1px;
border: #e6a23c solid 2px;
font-size: 1.5rem;
}
/* 默认倒计时 */
#defaultCountdownContainer {
/* width: 100%; */
display: flex;
flex-direction: column;
border: #e6a23c solid 2px;
margin: 2px 10px;
padding: 2px 10px;
}
div[id^="countdown-"] {
background: rgba(29, 29, 29, 0.708);
border-radius: 2px;
backdrop-filter: blur(1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.982);
text-shadow: 1px 1px 1px #000000;
font-weight: 500;
border: 2px solid #fff;
}
div[id^="countdown-"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 2px;
/* background: #141111; */
/* 底部分割线 */
background-image: url('file:///D:/img/42.png');
/* 替换为你的图片路径 */
background-size: cover;
/* 使背景图像覆盖整个元素 */
background-position: center;
/* 使背景图像居中 */
background-repeat: no-repeat;
/* 不重复背景图像 */
}
/* 添加的倒计时 */
#uniqueCountdowns {
/* width: 100%; */
display: flex;
flex-direction: column;
align-items: center;
margin: 1px;
padding: 1px;
border: #ffffff solid 1px;
}
.actionButtons {
width: 100%;
display: flex;
flex-direction: row;
}
.actionButtons button {
width: 100%;
}
.uniqueDeleteButton {
/* 删除按钮 */
color: red;
}
.operativeFunction {
/* height: 100%; */
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
/* 文本竖排 */
writing-mode: vertical-rl;
/* 文字间距 */
letter-spacing: 20px;
font-size: 25px;
padding-right: 10px;
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);
backdrop-filter: blur(2px);
}
.countdown-Buttons {
display: flex;
border: #e6a23c solid 2px;
}
.countdown-container form {
width: 100%;
display: flex;
}
.full-width {
width: 100%;
}
.countdown-container,
#uniqueCountdowns p {
width: 100%;
}
#uniqueCountdowns b {
border: #ffffff solid 2px;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px #000000;
border-radius: 4px;
margin: 2px;
padding: 2px;
font-size: 1.5rem;
background: #141111b7;
}
#uniqueCountdowns p label {
width: 100%;
margin: 2px;
border-radius: 2px;
backdrop-filter: blur(1px);
display: flex;
justify-content: space-between;
}
#uniqueCountdowns p label::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 2px;
background: #141111b7;
}
.countdown-container,
.uniqueCountdownCheckbox,
.uniqueEditButton,
.uniqueDeleteButton,
.finishButton {
/* 隐藏 */
display: none;
}
.uniqueCountdownCheckbox {
/* 复选框 */
transform: scale(1.8);
margin: 0 8px;
}
#uniqueCountdowns p.FinishTask {
position: relative;
/* 使子元素基于这个元素定位 */
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.103);
text-decoration-thickness: 2px;
color: transparent;
/* 将文本颜色设置为透明 */
}
/* 倒计时页面布局 结束*/
/* 登录后的结束 */
/* 白天 模式切换链接样式 */
#mask.day-mode {
background-color: #f0f0f0;
/* 白天模式背景颜色 */
color: #000000;
/* 白天模式文字颜色 */
}
nav.day-mode {
background-color: #cccccc;
/* 白天模式导航栏颜色 */
}
/* 简单的文本编辑器 */
#addReadFolderArea {
#addReadFolder {
display: flex;
#fileContent {
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 5px;
height: 865px;
overflow: auto;
}
}
}
</style>
</head>
<body>
<!-- 登录界面.wrapper -->
<div class="wrapper">
<div class="container">
<div class="welcome-box">
<h1>欢迎</h1>
<p>加入我们！</p>
<div class="image-container">
<img src="file:///D:/img/空.png" alt="正方形图片">
</div>
</div>
<div class="registration-container">
<div class="title-container">
<h1>注册</h1>
</div>
<div class="input-group">
<input type="text" id="reg-username" placeholder="用户名">
<input type="password" id="reg-password" placeholder="密码">
<input type="password" id="reg-confirm-password" placeholder="确认密码">
</div>
<div class="button-container">
<button class="register-btn" onclick="register()">注册</button>
<p onclick="mySwitch()">已有账号？去登录</p>
</div>
</div>
<div class="form-container">
<div class="title-container">
<h1>登录</h1>
</div>
<div class="input-group">
<input type="text" id="login-username" placeholder="用户名">
<input type="password" id="login-password" placeholder="密码">
</div>
<div class="button-container">
<button onclick="login()">登录</button>
<p onclick="mySwitch()">没有账号?去注册</p>
</div>
</div>
</div>
</div>
<!-- 登录界面.wrapper结束 -->
<!-- 登录后受保护的内容#mask -->
<div id="mask">
<!-- 头部 -->
<header>
<figure class="logoBox">
<div class="logo">
<a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客"
target="_blank">
<img class="kong" src="file:///D:/img/空.png" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"
title="首页" target="_blank">
<img class="ying" src="file:///D:/img/荧.png" alt="与妖为邻" />
</a>
</div>
</figure>
<!-- 导航栏 nav-->
<nav>
<!-- 导航栏链接 -->
<a href="#" onclick="showPage('home')">首页</a>
<a href="#" onclick="showPage('writeDown')">笔记</a>
<a href="#" onclick="showPage('webPage')">网页</a>
<a href="#" onclick="showPage('countdown')">倒计时</a>
<a href="#" onclick="showPage('about')">关于</a>
</nav>
<time datetime="2024-07-10" title="2024-07-10" id="dateTime1">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>
<button id="showCheckboxesButton">显示复选框10秒</button>
<button onclick="logout()" class="logout-btn"> 退出登录 </button>
<!-- 添加白天模式切换链接 -->
<a href="#" class="toggle-day-mode" onclick="toggledayMode()">白天模式</a>
</header>
<!-- 内容区 首页----------------------------------------------------------------------------->
<div id="home" class="content active">
<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 id="myDialog" class="myDialog">
<article class="dialog-form" id="Drag">
<h2>文本操作</h2>
<span onclick="myDialog.close()">×</span>
</article>
<form class="textarea-form">
<input type="file" name="file1"
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>
<button type="button" id="readFolder" onclick="addReadFolderArea.show()">修改数据器</button>
<menu id="toolbar">
<button type="button" id="btnBold">加粗</button>
<button type="button" id="btnItalic">斜体</button>
<button type="button" id="btnUnderline">下划线</button>
<button type="button" id="btnStrikeThrough">删除线</button>
<button type="button" id="btnInsertOrderedList">有序列表</button>
<button type="button" id="btnInsertUnorderedList">无序列表</button>
<button type="button" id="btnJustifyLeft">左对齐</button>
<button type="button" id="btnJustifyCenter">居中对齐</button>
<button type="button" id="btnJustifyRight">右对齐</button>
<button type="button" id="btnJustifyFull">两端对齐</button>
<button type="button" id="btnCreateLink">创建链接</button>
<button type="button" id="btnUnlink">取消链接</button>
<button type="button" id="btnInsertImage">插入图片</button>
<button type="button" id="btnForeColor">文字颜色</button>
<button type="button" id="btnBackground">背景颜色</button>
<button type="button" id="btnUndo">撤销</button>
<button type="button" id="btnRedo">重做</button>
<button type="button" id="btnExportHtml">导出HTML</button>
<button type="button" id="btnReset">重置</button>
<p id="editor" contenteditable="true" data-placeholder="在此输入需要编辑的文本"></p>
</menu>
<section>
<input type="reset" value="重置">
<textarea id="textareaHTML" class="textarea1" name="textarea1" rows="28" cols="125"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取,简陋版编辑器按钮是javascript操作文件内容,修改文件内容后,请快捷键ctrl+s保存"></textarea>
<button type="button" class="abb-text1">添加</button>
</section>
</form>
</dialog>
<output id="memo1">
<dialog id="addReadFolderArea"></dialog>
</output>
</td>
</tr>
</table>
</div>
<!-- 内容区 笔记----------------------------------------------------------------------------->
<div id="writeDown" class="content">
<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> <span onclick="myDialog2.close()">×</span>
</form>
<form class="textarea-form">
<input type="file" name="file2"
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="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>
</div>
<!-- 内容区 网页----------------------------------------------------------------------------->
<div id="webPage" class="content">
<h3> 常用网页</h3>
<table class="webPageTit">
<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>
<output id="memo3"></output>
</td>
</tr>
</table>
<table>
<tr>
<td>
<dialog id="myDialog3" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag3">
<h2>这是一个弹窗留言输入框</h2> <span onclick="myDialog3.close()">×</span>
</form>
<form class="textarea-form">
<input type="file" name="file3"
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="textarea3" name="textarea3" rows="10" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text3">添加</button>
</section>
</form>
</dialog>
<h3> 收藏列表</h3>
<div class="webList">
</div>
<h3>
本地列表
</h3>
<div class="localList">
</div>
</td>
</tr>
</table>
</div>
<!-- 内容区 倒计时----------------------------------------------------------------------------->
<div id="countdown" class="content">
<h3>倒计时计划</h3>
<table class="countdownTit">
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog4.show()">编辑按钮 </td>
<td>
<marquee behavior="alternate" direction="right">欢迎来到倒计时页面 </marquee>
</td>
<td id="delete4" class="deleteBtn">删除按钮</td>
<td>
<dialog id="myDialog4" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag4">
<h2>这是一个弹窗留言输入框</h2> <span onclick="myDialog4.close()">×</span>
</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>
</td>
</tr>
<tr>
<td>
<output id="memo4"></output>
</td>
</tr>
</table>
<div class="countdownContainer">
<div id="defaultCountdownContainer"></div> <!-- 默认倒计时容器 -->
<div class="countdown-Buttons">
<button id="operativeFunction" class="operativeFunction">操作</button>
<div id="uniqueCountdowns"> <!-- 用户添加的倒计时容器 -->
<div class="actionButtons">
<button class="uniqueEditButton" onclick="editSelectedCountdown()">修改</button>
<button class="uniqueDeleteButton" onclick="deleteSelectedCountdown()">删除</button>
</div>
<div class="countdown-container">
<form>
<input type="text" id="uniquePromptInput" class="full-width" placeholder="提示信息">
<input type="datetime-local" id="uniqueDatetimeInput" class="full-width">
<button id="uniqueSaveButton" class="full-width" onclick="saveCountdown()">保存</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 内容区 关于----------------------------------------------------------------------------->
<div id="about" class="content">
<h1>关于</h1>
<p>1.项目初始创建时间---2024年10月09日 </p>
<p>2.成功登录后，“存储登录”，推出登录删除“存储登录”功能。添加收藏网站,添加倒计时功能。---2024年10月22日 </p>
<p>
</div>
</div>
<!-- 登录后受保护的内容#mask结束 -->
</body>
<!-- 登录界面滑动引入的js文件 src="http://code.jquery.com/jquery-latest.js"-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 修改数据器引入 highlight.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="网站收藏.js"></script>
<script>
// 切换白天模式函数
function toggledayMode() {
document.getElementById("mask").classList.toggle('day-mode');
document.querySelector('nav').classList.toggle('day-mode');
}
/* 现在时间 */
(s = el => { d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}` })(setInterval(() => ["dateTime1",].forEach(id => s(document.getElementById(id))), 1000));
/* 现在时间 结束 */
// 存储用户信息的数组
const users = [
{ username: "admin", password: "admin123" }, // 添加管理员账户
{ username: "我", password: "w" } // 添加管理员测试账户
];
const register = () => {
const username = document.getElementById("reg-username").value;
const password = document.getElementById("reg-password").value;
const confirmPassword = document.getElementById("reg-confirm-password").value;
// 检查账号和密码是否为空
if (!username || !password) {
alert("账号和密码不能为空！");
return;
}
if (password !== confirmPassword) {
alert("密码不匹配！");
return;
}
// 检查用户名是否已存在
const userExists = users.some(user => user.username === username);
if (userExists) {
alert("用户名已存在，请选择其他用户名！");
return;
}
// 注册用户
users.push({ username, password });
alert("注册成功，请登录！");
mySwitch(); // 切换到登录界面
}
const login = () => {
const username = document.getElementById("login-username").value;
const password = document.getElementById("login-password").value;
// 验证用户信息
const user = users.find(user => user.username === username && user.password === password);
if (user) {
alert("登录成功！");
localStorage.setItem("loggedInUser", JSON.stringify(user)); // 储存用户信息
// 显示受保护的页面
document.getElementById("mask").style.display = "block"; // 显示内容
document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子
} else {
alert("用户名或密码错误！");
}
}
const logout = () => {
localStorage.removeItem("loggedInUser"); // 移除用户信息
document.getElementById("mask").style.display = "none"; // 隐藏受保护的内容
document.querySelector('.wrapper').style.display = "block"; // 显示注册和登录盒子
document.getElementById("login-username").value = ""; // 清空登录用户名输入框
document.getElementById("login-password").value = ""; // 清空登录密码输入框
}
let flag = true;
const mySwitch = () => {
if (flag) {
$(".welcome-box").css({
"transform": "translateX(100%)",
"background-image": "url('file:///D:/img/右.png')",
"border-radius": "0 8px 8px 0" // 添加边框圆角
});
$("img").css("transform", "scale(1.3)"); // 这个图片有点小了,添加缩放效果
$("img").attr("src", "file:///D:/img/荧.png");
} else {
$(".welcome-box").css({
"transform": "translateX(0%)",
"background-image": "url('file:///D:/img/左.png')",
"border-radius": "8px 0 0 8px" // 添加圆角效果
});
$("img").css("transform", "scale(1)"); // 这个图片返回原大小,添加缩放效果
$("img").attr("src", "file:///D:/img/空.png");
}
flag = !flag;
}
function loadCountdowns() {
const countdowns = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('uniqueCountdown_')) {
const data = JSON.parse(localStorage.getItem(key));
const timestamp = key.split('_')[1];
countdowns.push({ timestamp, data });
}
}
countdowns.sort((a, b) => a.timestamp - b.timestamp); // 按时间戳排序
countdowns.forEach(({ timestamp, data }) => {
const countdownDiv = document.getElementById('uniqueCountdowns');
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.innerHTML = `<label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label><button class="finishButton">${data.finished ? '取消' : '完成'}</button>`;
countdownDiv.appendChild(countdownElement);
// 更新倒计时
const datetime = data.datetime;
updateCountdown(`uniqueCountdown_${timestamp}`, new Date(datetime.slice(0, 4), datetime.slice(4, 6) - 1, datetime.slice(6, 8), datetime.slice(8, 10), datetime.slice(10, 12)));
// 根据 localStorage 中的状态设置类名
if (data.finished) {
countdownElement.classList.add('FinishTask');
}
// 添加“完成”按钮的点击事件监听器
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
// 更新 localStorage 中的状态
data.finished = isFinished;
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify(data));
});
});
}
// 导航页面切换函数
function showPage(page) {
// 隐藏所有内容并移除激活样式
document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));
document.querySelectorAll('nav a').forEach(link => link.classList.remove('nav-active'));
// 显示当前选择的内容
const selectedContent = document.getElementById(page);
selectedContent.classList.add('active');
document.querySelector(`nav a[onclick="showPage('${page}')"]`).classList.add('nav-active');
}
// 在页面加载时显示首页并激活相应的样式
document.addEventListener('DOMContentLoaded', function () {
showPage('home');
});
/* 通用的拖动功能 */
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个拖动按钮的实现结束*/
/*编辑文本输入框的占位符*/
document.addEventListener('DOMContentLoaded', function () {
const editor = document.getElementById('editor');
const placeholder = editor.getAttribute('data-placeholder');
editor.addEventListener('focus', function () {
if (editor.textContent === placeholder) {
editor.textContent = '';
editor.style.color = ''; // 恢复默认颜色
}
});
editor.addEventListener('blur', function () {
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
// 初始化时检查内容
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
/*编辑文本输入框的占位符 结束*/
/* 编辑文本输入框的清空按钮 */
document.getElementById('btnReset').addEventListener('click', function () {
document.getElementById('editor').innerText = '';
});
/* 简单的文本编辑器 */
document.addEventListener('DOMContentLoaded', () => {
const editor = document.getElementById('editor');
const exportedHtml = document.getElementById('textareaHTML');
function execCmd(command, value = null) {
document.execCommand(command, false, value);
}
function exportHtml() {
// 获取编辑器内容
let htmlContent = editor.innerHTML;
// 使用正则表达式查找所有 <a> 标签并添加 target="_blank"
htmlContent = htmlContent.replace(/<a\s+/g, '<a target="_blank" ');
// 设置导出的 HTML 内容
exportedHtml.value = htmlContent;
}
document.getElementById('toolbar').addEventListener('click', (event) => {
const target = event.target;
const command = target.id.replace('btn', '');
switch (command) {
case 'Bold':
case 'Italic':
case 'Underline':
case 'StrikeThrough':
case 'InsertOrderedList':
case 'InsertUnorderedList':
case 'JustifyLeft':
case 'JustifyCenter':
case 'JustifyRight':
case 'JustifyFull':
case 'Unlink':
case 'Undo':
case 'Redo':
execCmd(command);
break;
case 'CreateLink':
case 'InsertImage':
case 'ForeColor':
case 'Background':
const value = prompt(`输入${command === 'CreateLink' ? '链接地址' : command === 'InsertImage' ? '图片地址' : command === 'ForeColor' ? '文字颜色' : '背景颜色'}`, command === 'CreateLink' ? 'http://' : command === 'InsertImage' ? 'http://' : command === 'ForeColor' ? '#000000' : '#ffff00');
execCmd(command, value);
break;
case 'ExportHtml':
exportHtml();
break;
}
});
editor.focus();
});
/*简单的文本编辑器 结束*/
/*修改数据器*/
function initializeFileEditor() {
// 初始化对话框内容
document.getElementById('addReadFolderArea').innerHTML = `
<div id="addReadFolder">
<form id="buttonContainer">
<div id="fileTree"></div>
<button type="button" id="fileSave">保存</button>
<button type="submit" class="cancel-button">关闭</button>
</form>
<div id="fileContent" contenteditable="true" name="textarea1"></div>
</div>
`;
// 修改数据器功能
let currentFileHandle = null; // 变量用于存储当前文件句柄
document.getElementById('readFolder').addEventListener('click', async () => {
try {
const directoryHandle = await window.showDirectoryPicker();
const fileTree = document.getElementById('fileTree');
const fileContent = document.getElementById('fileContent');
fileTree.innerHTML = ''; // 清空文件树内容
fileContent.innerHTML = ''; // 清空文件内容区域
async function readDirectory(directoryHandle, parentElement) {
const ul = document.createElement('ul');
parentElement.appendChild(ul);
for await (const entry of directoryHandle.values()) {
const li = document.createElement('li');
const entryName = document.createElement('span');
entryName.textContent = entry.name;
li.appendChild(entryName);
ul.appendChild(li);
if (entry.kind === 'directory') {
entryName.textContent = `[文件夹] ${entry.name}`;
li.addEventListener('click', async (e) => {
e.stopPropagation();
if (li.classList.contains('open')) {
li.classList.remove('open');
li.querySelector('ul').remove();
} else {
li.classList.add('open');
await readDirectory(entry, li);
}
});
} else if (entry.kind === 'file') {
li.addEventListener('click', async (e) => {
e.stopPropagation();
currentFileHandle = entry;
const file = await entry.getFile();
fileContent.style.display = 'block';
fileContent.textContent = await file.text();
// 使用 highlight.js 高亮显示代码
hljs.highlightElement(fileContent);
});
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-button');
deleteButton.addEventListener('click', async (e) => {
e.stopPropagation();
if (confirm(`确定删除 ${entry.name}?`)) {
await directoryHandle.removeEntry(entry.name);
li.remove();
fileContent.innerHTML = '';
alert('文件删除成功!');
}
});
entryName.appendChild(deleteButton);
}
}
}
await readDirectory(directoryHandle, fileTree);
} catch (error) {
console.error('操作失败:', error);
alert('操作失败，请重试。');
}
});
// 同时按下Ctrl键和's'键保存
document.addEventListener('keydown', async (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请重试。');
}
}
});
// 为id="fileSave"的保存按钮添加保存功能
document.getElementById('fileSave').addEventListener('click', async () => {
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
} else {
alert('请先选择一个文件进行编辑。');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请重试。');
}
});
}
// 初始化文件编辑器
initializeFileEditor();
/*修改数据器 结束*/
/*留言内容------------------------------------------------------------*/
document.addEventListener("DOMContentLoaded", function () {
const todoContainers = [
{ textarea: ".textarea1", button: ".abb-text1", container: "#memo1", storageKey: "首页" },
{ textarea: ".textarea2", button: ".abb-text2", container: "#memo2", storageKey: "记下来" },
{ textarea: ".textarea3", button: ".abb-text3", container: "#memo3", storageKey: "临时网页" },
{ textarea: ".textarea4", button: ".abb-text4", container: "#memo4", storageKey: "倒计时" },
];
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(".Message")).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();
updateIndexes(); // 更新序号
}
}
});
// 添加动态id属性
function generateUniqueId() {
return 'checkbox-' + Math.random().toString(36).substr(2, 9);
}
function insertHtml(target, val, cls) {
const uniqueId = generateUniqueId();
const index = getNextIndex();
target.insertAdjacentHTML(
"beforeend",
`<div class='Success'>
${index}.
<input type="checkbox" name='checkbox' id='${uniqueId}'>
<label class='Message ${cls}' for='${uniqueId}'> ${val}</label>
</div>`
);
}
let indexCounter = 1;
function getNextIndex() {
return indexCounter++;
}
function updateIndexes() {
const messages = memo.querySelectorAll('.Success');
messages.forEach((message, index) => {
message.firstChild.textContent = `${index + 1}.`;
});
indexCounter = messages.length + 1; // 更新计数器
}
// 显示所有复选框10秒后自动隐藏
document.getElementById('showCheckboxesButton').addEventListener('click', function () {
// 获取所有带有 name='checkbox' 的复选框
const checkboxes = document.querySelectorAll('input[name="checkbox"]');
// 遍历并显示每个复选框
checkboxes.forEach(function (checkbox) {
checkbox.style.display = 'inline'; // 或其他你希望的显示方式
});
// 10秒倒计时
let countdown = 10;
const countdownInterval = setInterval(function () {
// 使用padStart方法将个位数补0
const countdownWithZero = countdown.toString().padStart(2, '0');
document.getElementById('showCheckboxesButton').innerHTML = `显示复选框 <span class='countdownWithZero'>${countdownWithZero}</span> 秒`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
document.getElementById('showCheckboxesButton').textContent = '显示复选框10秒';
// 隐藏复选框
checkboxes.forEach(function (checkbox) {
checkbox.style.display = 'none'; // 或其他你希望的隐藏方式
});
}
}, 1000); // 每秒更新一次
});
// 在页面加载时调用持久化存储的loadTodo()函数
loadTodo();
});
});
/* 网站收藏 */
const webList = document.querySelector(".webList");
const localList = document.querySelector(".localList");
// 创建链接的通用函数
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 (!Array.isArray(list) || !parent) {
console.error("无效的参数：列表应该是数组，父元素未找到");
return;
}
const ul = document.createElement("ul");
list.forEach((item) => {
if (item.title && item.src) {
const link = createLink(item.title, item.src);
if (link) {
const li = document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
} else {
console.error(`跳过无效项：${JSON.stringify(item)}`);
}
});
parent.appendChild(ul);
};
createList(webLinks, webList);
createList(localLinks, localList);
/* 网站收藏 结束 */
/* 倒计时功能实现开始------------------------------------*/
const defaultCountdowns = [
{ prompt: "元旦", datetime: "202501010000" },
{ prompt: "春节", datetime: "202502120000" },
{ prompt: "清明节", datetime: "202504040000" },
{ prompt: "劳动节", datetime: "202505010000" },
{ prompt: "端午节", datetime: "202506020000" },
{ prompt: "中秋节", datetime: "202509210000" },
{ prompt: "国庆节", datetime: "202510010000" },
];
const elementColors = ["#FF9933", "#3399FF", "#66c6ac", "#CC66FF", "#66CC66", "#99CCFF", "#FFCC33"];
let colorIndex = 0;
// 颜色函数:返回一个随机颜色，从预定义的颜色数组中选择。
function getRandomColor() {
colorIndex = (colorIndex + 1) % elementColors.length;
return elementColors[colorIndex];
}
// 零填充函数:返回一个字符串，如果数字小于10，则在左侧补零。
const padZero = num => num < 10 ? `0${num}` : num;
// 格式化日期函数:返回一个字符串，格式为"年-月-日 时:分"。
function formatDate(targetDate) {
const hours = targetDate.getHours();
const minutes = targetDate.getMinutes();
let timeString = '';
if (hours !== 0 || minutes !== 0) {
timeString = targetDate.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
});
}
return targetDate.getFullYear() + '年' +
(targetDate.getMonth() + 1).toString().padStart(2, '0') + '月' +
targetDate.getDate().toString().padStart(2, '0') + '日 ' + timeString;
}
// 更新倒计时函数...
// 启动默认倒计时函数...
// 格式化日期为"年-月-日 时:分"的函数
function formatDatetime(datetimeInput) {
// 确保传入字符串长度为12
if (datetimeInput.length !== 12) {
console.error("输入格式错误，应该为12位字符串:", datetimeInput);
return "无效日期";
}
const year = datetimeInput.slice(0, 4);
const month = datetimeInput.slice(4, 6);
const day = datetimeInput.slice(6, 8);
const hours = datetimeInput.slice(8, 10);
const minutes = datetimeInput.slice(10, 12);
const formattedInput = `${year}-${month}-${day}T${hours}:${minutes}`;
console.log("Formatted Input:", formattedInput);
const date = new Date(formattedInput);
if (isNaN(date.getTime())) {
console.error("无效的日期:", datetimeInput);
return "无效日期";
}
const formattedYear = date.getFullYear();
const formattedMonth = padZero(date.getMonth() + 1);
const formattedDay = padZero(date.getDate());
const formattedHours = padZero(date.getHours());
const formattedMinutes = padZero(date.getMinutes());
if (formattedHours === "00" && formattedMinutes === "00") {
return `${formattedYear}年${formattedMonth}月${formattedDay}日`;
}
return `${formattedYear}年${formattedMonth}月${formattedDay}日 ${formattedHours}:${formattedMinutes}`;
}
// 更新倒计时函数:更新倒计时显示，包括剩余时间和结束日期的格式化，并设置样式和颜色
function updateCountdown(elementId, targetDate, promptText, isDefault = false) {
const countdownElement = document.getElementById(elementId);
if (isDefault) {
countdownElement.textContent = promptText;
countdownElement.style.color = getRandomColor();
}
const endDateStr = formatDate(targetDate);
const update = () => {
const now = new Date();
const total = targetDate - now;
const absTotal = Math.abs(total);
const seconds = Math.floor((absTotal / 1000) % 60);
const minutes = Math.floor((absTotal / 1000 / 60) % 60);
const hours = Math.floor((absTotal / (1000 * 60 * 60)) % 24);
const days = Math.floor(absTotal / (1000 * 60 * 60 * 24));
const timeStr = `${days}天${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
countdownElement.textContent = `${endDateStr}(${promptText}): ${total <= 0 ? `-${timeStr}` : timeStr} `;
if (!isDefault) {
countdownElement.style.color = getRandomColor();
}
};
update();
setInterval(update, 1000);
}
// 启动默认倒计时函数
defaultCountdowns.forEach(countdown => {
const countdownId = `countdown-${countdown.prompt}`;
const countdownDiv = document.createElement('div');
countdownDiv.id = countdownId;
document.getElementById('defaultCountdownContainer').appendChild(countdownDiv);
updateCountdown(countdownId, new Date(countdown.datetime.slice(0, 4), countdown.datetime.slice(4, 6) - 1, countdown.datetime.slice(6, 8), countdown.datetime.slice(8, 10), countdown.datetime.slice(10, 12)), countdown.prompt, true);
});
// 创建倒计时元素函数:根据输入的提示信息和时间戳创建倒计时元素，并返回该元素。
function createCountdownElement(promptInput, timestamp, datetimeInput) {
const countdownDiv = document.createElement('p');
countdownDiv.style.backgroundColor = getRandomColor();
const checkboxId = `uniqueCheckbox_${timestamp}`;
// 调用formatDatetime函数格式化datetimeInput
const formattedDatetime = formatDatetime(datetimeInput);
countdownDiv.innerHTML = `
<label for="${checkboxId}"><input type="checkbox" class="uniqueCountdownCheckbox" id="${checkboxId}" value="${timestamp}">
${formattedDatetime}(${promptInput})<b id="倒计时_${timestamp}"></b><button class="finishButton">完成</button></label>
`;
return countdownDiv;
}
// 更新倒计时显示函数:更新指定倒计时元素的显示，包括剩余时间的计算。
function updateCountdownDisplay(elementId, targetDate) {
const countdownElement = document.getElementById(elementId);
const update = () => {
const now = new Date();
const total = targetDate - now;
const timeStr = formatTime(Math.abs(total));
countdownElement.textContent = total <= 0 ? `-${timeStr}` : timeStr;
};
update();
setInterval(update, 1000);
}
// 保存倒计时函数:保存用户输入的倒计时信息，并创建倒计时元素，更新倒计时显示，设置完成按钮事件，清空输入字段。
function saveCountdown() {
const promptInput = document.getElementById('uniquePromptInput').value.trim();
const datetimeInput = document.getElementById('uniqueDatetimeInput').value;
if (promptInput && datetimeInput) {
const targetDate = new Date(datetimeInput);
const timestamp = Date.now();
const countdownElement = createCountdownElement(promptInput, timestamp, datetimeInput);
document.getElementById('uniqueCountdowns').appendChild(countdownElement);
updateCountdown(`倒计时_${timestamp}`, targetDate, promptInput, false);
console.log(`提示信息: ${promptInput}, 目标日期: ${datetimeInput}`);
// 在设置到 localStorage 之前和之后
localStorage.setItem(`倒计时_${timestamp}`, JSON.stringify({ prompt: promptInput, datetime: datetimeInput.replace(/-/g, '').replace(/T/g, '').replace(/:/g, ''), finished: false }));
console.log(`倒计时信息已保存: ${localStorage.getItem(`倒计时_${timestamp}`)}`);
attachFinishButtonEvent(countdownElement, timestamp);
clearInputFields();
} else {
alert('请填写提示信息和目标日期');
}
}
// 格式化时间函数:返回一个字符串，格式为"天:时:分:秒"。
function formatTime(total) {
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return `${days}天${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
}
document.getElementById('operativeFunction').addEventListener('click', function () {
const button = this;
const finishButtons = document.querySelectorAll('.finishButton');
const countdownCheckboxes = document.querySelectorAll('.uniqueCountdownCheckbox');
toggleOperation(button, finishButtons, countdownCheckboxes);
});
// 清除所选倒计时函数:编辑选中的倒计时，允许用户输入新的提示信息和目标日期。
function editSelectedCountdown() {
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
if (checkboxes.length === 0) return;
checkboxes.forEach(checkbox => {
const timestamp = checkbox.value;
const data = JSON.parse(localStorage.getItem(`倒计时_${timestamp}`));
if (data) {
const newPrompt = prompt('请输入新的提示信息', data.prompt);
const newDatetime = prompt('目标日期(YYYYMMDDHHMM,例如:202410010400)', data.datetime);
if (newPrompt && newDatetime) {
checkbox.parentNode.remove();
localStorage.setItem(`倒计时_${timestamp}`, JSON.stringify({ prompt: newPrompt, datetime: newDatetime }));
const countdownElement = createCountdownElement(newPrompt, timestamp, newDatetime);
document.getElementById('uniqueCountdowns').appendChild(countdownElement);
updateCountdownDisplay(`倒计时_${timestamp}`, new Date(newDatetime.slice(0, 4), newDatetime.slice(4, 6) - 1, newDatetime.slice(6, 8), newDatetime.slice(8, 10), newDatetime.slice(10, 12)));
}
}
});
checkboxes.forEach(checkbox => checkbox.checked = false);
document.dispatchEvent(new Event('change'));
}
// 删除所选倒计时函数:删除选中的倒计时，确认后从本地存储中移除。
function deleteSelectedCountdown() {
const confirmDelete = confirm("确定要删除选中的倒计时吗？");
if (confirmDelete) {
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox:checked');
checkboxes.forEach(checkbox => {
const timestamp = checkbox.value;
localStorage.removeItem(`倒计时_${timestamp}`);
checkbox.parentNode.remove();
});
toggleEditDeleteButtons();
document.dispatchEvent(new Event('change'));
}
}
// 切换操作函数:在操作模式下显示或隐藏，切换按钮文本。
function toggleOperation(button, finishButtons, countdownCheckboxes) {
const isOperating = button.textContent.trim() === '操作';
button.textContent = isOperating ? '取消操作' : '操作';
finishButtons.forEach(finishButton => finishButton.style.display = isOperating ? 'inline-block' : 'none');
countdownCheckboxes.forEach(checkbox => {
checkbox.style.display = isOperating ? 'inline-block' : 'none';
if (!isOperating) checkbox.checked = false;
});
// 显示或隐藏表单
const countdownForm = document.querySelector('.countdown-container');
countdownForm.style.display = isOperating ? 'inline' : 'none'; // 切换显示状态
toggleEditDeleteButtons();
}
// 切换编辑删除按钮函数:根据是否有选中的倒计时，显示或隐藏编辑和删除按钮。
function toggleEditDeleteButtons() {
const isChecked = document.querySelectorAll('.uniqueCountdownCheckbox:checked').length > 0;
document.querySelector('.uniqueEditButton').style.display = isChecked ? 'inline-block' : 'none';
document.querySelector('.uniqueDeleteButton').style.display = isChecked ? 'inline-block' : 'none';
}
document.addEventListener('change', function () {
const checkboxes = document.querySelectorAll('.uniqueCountdownCheckbox');
const finishButtons = document.querySelectorAll('.finishButton');
checkboxes.forEach((checkbox, index) => {
const isChecked = checkbox.checked;
checkbox.style.display = isChecked ? "inline" : "none";
finishButtons[index].style.display = isChecked ? 'inline' : 'none';
});
toggleEditDeleteButtons();
const operativeButton = document.getElementById('operativeFunction');
const isChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
operativeButton.textContent = isChecked ? '取消操作' : '操作';
});
// 附件完成按钮事件函数:为完成按钮附加事件，切换任务完成状态，并更新本地存储。
function attachFinishButtonEvent(countdownElement, timestamp) {
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
const countdownData = JSON.parse(localStorage.getItem(`倒计时_${timestamp}`));
countdownData.finished = isFinished;
localStorage.setItem(`倒计时_${timestamp}`, JSON.stringify(countdownData));
});
}
// 清空输入字段函数:清空输入框的内容。
function clearInputFields() {
document.getElementById('uniquePromptInput').value = '';
document.getElementById('uniqueDatetimeInput').value = '';
}
// 窗口加载函数:在窗口加载时，读取本地存储中的倒计时数据，并呈现在页面上。
window.onload = function () {
// 检查用户是否已经登录
const loggedInUser = localStorage.getItem("loggedInUser");
if (loggedInUser) {
document.getElementById("mask").style.display = "block"; // 显示内容
document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子
const countdowns = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('倒计时_')) {
try {
const data = JSON.parse(localStorage.getItem(key));
if (data) {
countdowns.push({ timestamp: key.split('_')[1], data });
}
} catch (error) {
console.error('解析localStorage数据时出错:', error);
}
}
}
countdowns.sort((a, b) => a.timestamp - b.timestamp);
countdowns.forEach(({ timestamp, data }) => {
const countdownElement = createCountdownElement(data.prompt, timestamp, data.datetime);
document.getElementById('uniqueCountdowns').appendChild(countdownElement);
const targetDate = new Date(data.datetime.replace(/(.{4})(.{2})(.{2})(.{2})(.{2})/, "$1-$2-$3T$4:$5"));
updateCountdownDisplay(`倒计时_${timestamp}`, targetDate);
if (data.finished) {
countdownElement.classList.add('FinishTask');
}
attachFinishButtonEvent(countdownElement, timestamp);
});
}
// 本地文件上传添加按钮
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.");
};
};
}
});
};
/*本地文件上传添加按钮 结束*/
/* 倒计时功能实现 结束*/
</script>
</html>