<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机备忘录</title>
</head>
<script type="text/javascript">
document.addEventListener('plusready', function () {
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
});
</script>
<style>
* {
/* 禁止文本选中 */
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
.wrapper {
width: 100%;
background: linear-gradient(to bottom, #f7c750, #ff6d6d);
background-image: url('img/开门.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
width: 98%;
height: 96%;
display: flex;
flex-direction: column;
/* 设置为列方向 */
position: relative;
border-radius: 8px;
margin: 2% 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: 100%;
height: 50%;
/* 调整高度 */
position: absolute;
/* 保持绝对定位 */
left: 0;
top: 0;
transition: transform 0.5s ease-in-out;
/* 保持过渡效果 */
border: 5px;
border-radius: 8px 8px 0 0;
background-image: url('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;
}
.container p,
.container 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: rgba(75, 82, 88, 0.9);
/* 使用半透明背景 */
backdrop-filter: blur(5px);
opacity: 0.9;
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: 99;
}
.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;
}
.container input {
width: 60%;
height: 25px;
margin-bottom: 20px;
text-indent: 4px;
border-radius: 3px;
box-shadow: 0px 0px 5px 5px #f7c750;
}
.form-container input[type="password"] {
transform: translateY(20px);
}
.container input:focus {
color: rgb(61, 185, 71);
}
.button-container {
display: flex;
justify-content: center;
}
.form-container .button-container {
margin-top: 45px;
}
.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:hover {
cursor: pointer;
background-color: aqua;
}
.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 p:active,
button:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.container ::placeholder {
color: rgb(36, 192, 127);
letter-spacing: 25px;
font-size: 15px;
}
/* 隐藏区域 */
#mask {
width: 100%;
background-image: url('img/原神.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
z-index: 99;
padding: 5px;
text-shadow: 1px 1px 1px #100000;
/* 溢出高度滚动条 */
overflow-y: scroll;
}
.content-rent {
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
text-align: center;
}
/* 凹背景样式 */
.total-cost b,
.common-span {
color: #ffff00;
position: relative;
border-radius: 3px;
font-size: 30px;
padding: 0 5px;
font-weight: bold;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.589), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.common-h2 {
background-color: #28a7462e;
border-radius: 0 0 2px 2px;
}
/* 退出登录按钮*/
.logoutButton {
float: left;
cursor: pointer;
font-size: 16px;
height: 1.5rem;
border: 1px solid #ccc;
}
/* 删除按钮样式 */
#deleteButton {
background-color: red;
color: white;
border: none;
padding: 0px 5px;
border-radius: 2px;
cursor: pointer;
/* 鼠标指针样式 */
margin: 5px;
float: right;
font-size: 16px;
height: 1.5rem;
}
/* 房租水电费添加输入框区域 */
.input-section {
width: 100%;
display: flex;
}
.input-section button,
.input-section input {
width: 100%;
border-radius: 2px;
border: 1px solid #ccc;
padding: 0 2px;
}
/* 添加按钮样式 */
#addButton {
background-color: green;
color: white;
padding: 0px 5px;
cursor: pointer;
font-size: 16px;
height: 1.5rem;
}
/* 日期行 */
.table-body {
display: flex;
flex-direction: column-reverse;
border-radius: 3px;
}
.date-month {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 9px #47434c,
inset 0 0 2px 10px #ff0000;
display: flex;
flex-direction: column-reverse;
padding: 10px;
margin: 3px;
border-radius: 3px;
border: 2px solid #ffaa7f;
}
.details,
.rent-row {
width: 100%;
display: flex;
justify-content: space-around;
background-color: #144756;
}
.date-column {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 0 auto;
background-color: #28a745;
}
/*日期标题 */
.date {
transform: translate(-12%, -236%) scale(0.8);
}
.year {
position: relative;
top: 28px;
left: 45px;
padding: 5px 15px 30px 12px;
border-radius: 10px 10px 0 0;
color: rgb(234, 255, 0);
background-color: #ff0000;
}
.recordCheckbox {
position: relative;
transform: translate(130%, 270%) scale(2);
z-index: 999999;
}
.date h1 {
position: absolute;
border: 5px solid #333;
width: 135px;
line-height: 112px;
font-size: 60px;
letter-spacing: -3px;
-webkit-text-fill-color: transparent;
border-radius: 20px 10px 10px 10px;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
}
.month1 {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
text-shadow: 1px 1px 1px #d1ec04;
-webkit-text-stroke: #fffbfb 1px;
}
.month2 {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translateY(1px);
z-index: 20;
text-shadow: 1px 1px 1px #ff0303;
-webkit-text-stroke: #ffffff 1px;
}
/*日期标题 结束*/
/* 水表 */
.water-meter {
width: 90px;
height: 90px;
margin: 0 10px;
border-radius: 75px;
background: #e0f7fa;
border: 5px solid #0288d1;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.water-meter h2 {
background: linear-gradient(to top, #0091ea, #00bcd4);
border-radius: 0 0 75px 75px;
}
/* 水表 结束*/
/* 电表 */
.electric-meter {
border: 5px solid #00bcd4;
border-radius: 10px;
background: #fff;
}
.electric-meter h2 {
background: linear-gradient(to top, #0091ea, #00bcd4);
border-radius: 0 0 2px 2px;
}
/* 电表结束 */
.water-meter p {
animation: backgroundChange2 10s infinite;
margin: 4px;
font-size: 25px;
font-weight: bold;
padding: 0 7px 3px 5px;
}
.electric-meter p {
animation: backgroundChange 10s infinite;
margin: 4px;
font-size: 25px;
font-weight: bold;
padding: 0 7px 3px 5px;
}
@keyframes backgroundChange2 {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #ff0000;
color: #cfd601;
border-radius: 33px 33px 0 0;
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #f6ff00;
color: #ffffff;
border-radius: 30px 30px 0 0;
}
}
@keyframes backgroundChange {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
box-shadow: 0 0 10px 2px rgba(233, 0, 0, 0.2), 0 0 1px 2px rgb(117, 1, 1),
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #ff0000;
color: #cfd601;
border-radius: 2px;
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
box-shadow: 0 0 10px 2px rgba(223, 0, 0, 0.2), 0 0 1px 2px rgb(117, 1, 1),
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #f6ff00;
color: #ffffff;
border-radius: 3px;
}
}
.details table {
width: 100%;
text-align: center;
border: 2px solid #000000;
}
.details table b {
font-size: 20px;
}
/* 房租 */
/* 总金额 */
.rent,
.total-amount {
background: #0288d1;
margin: 10px 0;
padding: 0 5px;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.589), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.total-amount {
background: #f30000;
color: #ff9933;
}
.footer-cell {
background: #f30000;
}
.common-div-right p {
font-size: 10px;
}
/* 倒计时 */
h3,
h1 {
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
}
.countdownContainer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 1px;
padding: 1px;
/* border: #e6a23c solid 2px; */
font-size: 1.2rem;
}
/* 默认倒计时 */
#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('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 2px;
}
.actionButtons {
width: 100%;
display: flex;
flex-direction: row;
}
.actionButtons button {
width: 100%;
font-size: 18px;
}
.uniqueDeleteButton {
/* 删除按钮 */
color: red;
}
.operativeFunction {
width: 100%;
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
font-size: 20px;
letter-spacing: 50px;
/* 调整字符间隔 */
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 {
width: 100%;
display: flex;
border: #e6a23c solid 2px;
color: #f56c6c;
}
.countdown-container form {
width: 100%;
display: flex;
}
.countdown-container form input[type="text"] {
padding: 0.3rem;
}
.full-width {
width: 100%;
}
.countdown-container,
#uniqueCountdowns p {
width: 100%;
}
#uniqueCountdowns b {
color: hsl(160deg 100% 52.48%);
text-shadow: 1px 1px 1px #000000;
border-radius: 4px;
margin: 4px 6px;
padding: 2px;
font-size: 1.2rem;
background: #14111177;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.669);
}
#uniqueCountdowns p label {
width: 100%;
margin: 2px;
border-radius: 2px;
}
.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(255, 253, 253, 0);
text-decoration-thickness: 2px;
color: transparent;
/* 将文本颜色设置为透明 */
}
/* 倒计时结束 */
/* <!-- 账号记录表 --> */
.containerPasswordMemoTable {
display: none;
background-color: #144756;
}
.containerPasswordMemoTable table {
text-align: center;
user-select: none;
width: 100%;
}
.containerPasswordMemoTable .header th {
color: rgb(255, 255, 255);
text-shadow: 1px 1px 1px #000000;
}
.containerPasswordMemoTable th {
background-color: #277b94;
}
#accountDataListTable td,
.forbidden {
color: rgba(2, 246, 2, 0.658);
text-shadow: 1px 1px 1px #100000;
}
#accountPasswordMemoTable td,
.allowed {
color: red;
}
/* <!-- 账号记录表 结束 --> */
</style>
<body>
<div class="wrapper">
<div class="container">
<div class="welcome-box">
<h1>欢迎</h1>
<p>加入我们！</p>
<div class="image-container">
<img src="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>
<div style="display:none" id="mask">
<div class="content-rent">
<h2 class="common-h2">
<button onclick="logout()" class="logoutButton"> 退出登录 </button>
房租水电费记账本
<button id="deleteButton">删除</button>
</h2>
<div class="header">
<div id="dataTable" class="table">
<div class="input-section">
<input type="month" id="dateInput">
<input type="text" id="rentInput" placeholder="房租">
<input type="text" id="waterInput" placeholder="水表">
<input type="text" id="electricInput" placeholder="电表">
<input type="text" id="noteInput" placeholder="备注">
<button id="addButton" style="cursor: pointer;">添加</button>
</div>
<div class="table-body"> </div>
<div class="table-footer">
<div class="footer-cell" colspan="2"></div>
</div>
</div>
</div>
</div>
<hr />
<!-- 倒计时 -->
<h3> 倒计时</h3>
<div class="countdownContainer">
<div id="defaultCountdownContainer">
</div> <!-- 默认倒计时容器 -->
<div class="countdown-Buttons">
<div id="uniqueCountdowns"> <!-- 用户添加的倒计时容器 -->
<button id="operativeFunction" class="operativeFunction">操作</button>
<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>
<!-- 倒计时结束 -->
<!-- 账号记录表 -->
<form id="mobileLoginForm">
<button id="mobileLoginButton">登录</button>
</form>
<div class="containerPasswordMemoTable">
<table border="1">
<thead>
<tr>
<th colspan="2" class="allowed"><form id="accountPasswordMemoForm">
<input type="text" id="inputWebsite" placeholder="请输入网站名称" required>
<input type="text" id="inputAccount" placeholder="请输入账号" required>
<input type="password" id="inputPassword" placeholder="请输入密码" required>
<input type="text" id="inputNote" placeholder="请输入备注">
<button type="submit">添加</button>
</form></th>
</tr>
</thead>
<tbody id="accountPasswordMemoTable"></tbody>
<thead>
<tr class="header">
<th>网站</th>
<th>账号</th>
</tr>
<tr>
<th colspan="2" class="forbidden">内置账号</th>
</tr>
</thead>
<tbody id="accountDataListTable"></tbody>
</table>
</div>
<!-- 账号记录表 结束-->
</div>
<script>
let flag = true;
const mySwitch = () => {
const welcomeBox = document.querySelector(".welcome-box");
const img = document.querySelector("img");
if (flag) {
welcomeBox.style.transform = "translateY(100%)";
welcomeBox.style.backgroundImage = "url('img/下.png')"; // 修改为背景图片
welcomeBox.style.borderRadius = "0 0 8px 8px"; // 添加边框圆角
img.setAttribute("src", "img/荧.png");
img.style.transform = "scale(1.3)"; // 这个图片返回原大小,添加缩放效果
} else {
welcomeBox.style.transform = "translateY(0%)";
welcomeBox.style.backgroundImage = "url('img/上.png')"; // 修改为背景图片
welcomeBox.style.borderRadius = "8px 8px 0 0"; // 添加圆角效果
img.setAttribute("src", "img/空.png");
img.style.transform = "scale(1)"; // 这个图片返回原大小,添加缩放效果
}
flag = !flag;
}
const users = [
{
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("登录成功！");
document.getElementById("mask").style.display = "block";
document.querySelector('.wrapper').style.display = "none";
localStorage.setItem('loggedInUser', username); // 保存登录状态到 localStorage
} else {
alert("用户名或密码错误！");
}
}
const logout = () => {
document.getElementById("mask").style.display = "none";
document.querySelector('.wrapper').style.display = "block";
document.getElementById("login-username").value = "";
document.getElementById("login-password").value = "";
localStorage.removeItem('loggedInUser'); // 删除登录状态
}
</script>
<script>
// 页面加载完成后执行
window.onload = function () {
// 检查用户是否已经登录
if (localStorage.getItem('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);
});
// 渲染数据
renderData(); // 如果有其他页面数据需要渲染，可以在这里调用
};
</script>
</body>
<script>
let rentRecords = initRentRecords(); // 只初始化一次
let totalWaterUsage = 0; // 总用水量
let totalElectricityUsage = 0; // 总用电量
function initRentRecords() {
const storedRecords = localStorage.getItem('房租记录');
return storedRecords ? JSON.parse(storedRecords) : [
// 默认数据
{
"日期": "2024年7月25日",
"房租": 1000,
"水表": 66,
"电表": 2316,
"备注": "房租500元,押金100元",
"禁止删除": true
},
{
"日期": "2024年8月25日",
"房租": 1500,
"水表": 68,
"电表": 2537,
"备注": "3个月房租,8月25日-11月25日",
"禁止删除": true
},
{
"日期": "2024年9月25日",
"房租": 0,
"水表": 71,
"电表": 2600,
"备注": "9月30日抄表数",
"禁止删除": true
},
{
"日期": "2024年10月25日",
"房租": 0,
"水表": 74,
"电表": 2685,
"备注": "3个月房租,8月25日-11月25日",
"禁止删除": true
},
];
}
const newNovemberRecord = {
"日期": "2024年10月25日",
"房租": 0,
"水表": 74,
"电表": 2685,
"备注": "3个月房租,8月25日-11月25日",
"禁止删除": true
};
addRentRecord(newNovemberRecord);
// 假设你有一个函数来添加新的房租记录
function addRentRecord(newRecord) {
// 检查记录是否已经存在
const exists = rentRecords.some(record => record["日期"] === newRecord["日期"]);
if (!exists) {
rentRecords.push(newRecord);
saveRentRecordsToLocalStorage(); // 保存到localStorage
} else {
console.log("该记录已存在：", newRecord);
}
}
// 函数用于将房租记录保存到localStorage
function saveRentRecordsToLocalStorage() {
localStorage.setItem('房租记录', JSON.stringify(rentRecords));
}
// 计算函数
function calcCosts(curr, prev) {
const waterUsage = prev ? curr.水表 - prev.水表 : 0;
const electricityUsage = prev ? curr.电表 - prev.电表 : 0;
const waterFee = waterUsage > 0 ? waterUsage * 5 : 0; // 水费计算
const electricityFee = electricityUsage > 0 ? electricityUsage * 1 : 0; // 电费计算
const total = curr.房租 + waterFee + electricityFee; // 本月总金额计算
// 更新总用水量和总用电量
totalWaterUsage += waterUsage;
totalElectricityUsage += electricityUsage;
return {
waterUsage,
electricityUsage,
waterFee,
electricityFee,
total,
totalWaterUsage, // 返回总用水量
totalElectricityUsage, // 返回总用电量
waterUsageCalc: `${curr.水表} - ${prev ? prev.水表 : curr.水表} = ${waterUsage} (吨)`,
electricityUsageCalc: `${curr.电表} - ${prev ? prev.电表 : curr.电表} = ${electricityUsage} (度)`,
waterFeeCalc: `${waterUsage} * 5 = ${waterFee}(元)`,
electricityFeeCalc: `${electricityUsage} * 1 = ${electricityFee}(元)`,
totalCalc: `${curr.房租} + ${waterFee} + ${electricityFee} = ${total}(元)`,
};
}
// 渲染数据函数
function renderData() {
let totalRent = 0,
totalWaterFee = 0,
totalElectricityFee = 0;
const contentArea = document.getElementById('dataTable').querySelector('.table-body');
let content = ''; // 用于存储所有内容
rentRecords.forEach((record, index) => {
totalRent += record.房租;
const prevRecord = index > 0 ? rentRecords[index - 1] : null;
const {
waterUsage,
electricityUsage,
waterFee,
electricityFee,
total,
waterUsageCalc,
electricityUsageCalc,
waterFeeCalc,
electricityFeeCalc,
totalCalc
} = calcCosts(record, prevRecord);
totalWaterFee += waterFee;
totalElectricityFee += electricityFee;
const month = String(parseInt(record.日期.substring(5, 7), 10)).padStart(2, '0');
// 拼接每一项数据到 content，添加复选框
content += `
<div class="date-month">
<div class="rent-row">
<div>房租:
<b class="rent">${record.房租}元</b></div>
<div >本月已缴总金额:
<b class="total-amount">${total}元</b></div>
</div>
<div class="date-column">
<div class="date">
<div class="year-month">
<input type="checkbox" class="recordCheckbox" data-index="${index}" />
<sub class="year">${record.日期.substring(0, 5)}</sub>
<h1 class="month1">${month}月</h1>
</div>
<h1 class="month2">${month}月</h1>
</div>
<div class="water-meter">
<p>${record.水表}</p>
<h2>水表</h2>
</div>
<div class="electric-meter">
<p>${record.电表}</p>
<h2>电表</h2>
</div>
</div>
<details class="details">
<summary>
查看详细信息
</summary>
<div>
<p><span>首月押金500元</span><span>房租500元/月</span></p>
<p><span>水:5元/吨</span><span>电:1元/度</span></p>
</div>
<table class="details-table" border='1'>
<tr>
<th colspan="2">
${record.日期.substring(0, 5)}${record.日期.substring(5, 7)}详细信息
</th>
</tr>
<tr>
<td class="rent">
<div class=" common-div-left">
<p>500元/月</p>
<span class="common-span">${record.房租}元</span>
<h2 class="common-h2">房租</h2>
</div>
</td>
<td class="total-amount">
<div class=" common-div-right">
<p>${totalCalc}</p>
<span class="common-span">${total}元</span>
<h2 class="common-h2">应缴金额</h2>
</div>
</td>
</tr>
<tr class="usage-row">
<td>
<div class="common-div-left">
<h2 class="common-h2">用水量</h2>
<p>水${waterUsageCalc}</p>
<span class="common-span">${waterUsage}吨</span>
</div>
</td>
<td>
<div class="common-div-right">
<h2 class="common-h2">用电量</h2>
<p>电${electricityUsageCalc}</p>
<span class="common-span">${electricityUsage}度</span>
</div>
</td>
</tr>
<tr class="fees-row">
<td>
<div class="common-div-left">
<h2 class="common-h2">水费</h2>
<p>${waterFeeCalc}</p>
<span class="common-span">${waterFee}元</span>
</div>
</td>
<td>
<div class="common-div-right">
<h2 class="common-h2">电费</h2>
<p>${electricityFeeCalc}</p>
<span class="common-span">${electricityFee}元</span>
</div>
</td>
</tr>
</tr>
<tr class="remarks-row">
<td colspan="2">
<div><b>备注:</b><span>${record.备注}</span> </div>
</td>
</tr>
</table>
<table class="total-cost" border='1'>
<tr>
<th colspan="2">
${rentRecords[0].日期.substring(0, 5)}${rentRecords[0].日期.substring(5,
7)}到${record.日期.substring(0,
5)}${record.日期.substring(5, 7)}总计
</th>
</tr>
<tr>
<td>总缴费用</td>
<td><b>${totalRent + totalWaterFee + totalElectricityFee}元</b></td>
</tr>
<tr>
<td>总房租</td>
<td><b>${totalRent}元</b></td>
</tr>
<tr>
<td>总水电费</td>
<td><b>${totalWaterFee + totalElectricityFee}元</b> </td>
</tr>
<tr>
<td>总用水量</td>
<td><b>${totalWaterUsage}吨</b></td>
</tr>
<tr>
<td>总水费</td>
<td><b>${totalWaterFee}元</b></td>
</tr>
<tr>
<td>总用电量</td>
<td><b>${totalElectricityUsage}度</b></td>
</tr>
<tr>
<td>总电费</td>
<td><b>${totalElectricityFee}元</b></td>
</tr>
</table>
</details>
</div>
`;
});
// 设置整个内容区域
contentArea.innerHTML = content;
// 最后添加脚注
const footerArea = document.querySelector('.table-footer');
footerArea.innerHTML = `<div class="footer-cell" colspan="2">房租记录到底了，没有更多了！</div>`;
}
function updateLocalStorage() {
// 仅在添加或更新时调用此函数
localStorage.setItem('房租记录', JSON.stringify(rentRecords));
}
// 添加新记录的功能
document.getElementById('addButton').addEventListener('click', function () {
const dateInput = document.getElementById('dateInput').value;
const rentInput = parseFloat(document.getElementById('rentInput').value) || 0;
const waterInput = parseFloat(document.getElementById('waterInput').value) || 0;
const electricInput = parseFloat(document.getElementById('electricInput').value) || 0;
const noteInput = document.getElementById('noteInput').value;
// 检查日期是否有效
if (!dateInput) {
alert("请填写有效的日期。");
return;
}
// 创建新记录对象
const newRecord = {
"日期": new Date(dateInput).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
}).replace(/\//g, '年'), // 将“/”替换为“年”
"房租": rentInput,
"水表": waterInput,
"电表": electricInput,
"备注": noteInput,
"禁止删除": false // 新增加的记录默认为可以删除
};
// 将新记录添加到数组
rentRecords.push(newRecord);
// 更新 localStorage
updateLocalStorage();
// 清空输入框
document.getElementById('dateInput').value = '';
document.getElementById('rentInput').value = '';
document.getElementById('waterInput').value = '';
document.getElementById('electricInput').value = '';
document.getElementById('noteInput').value = '';
// 渲染数据
renderData();
});
// 更新 localStorage 的函数
function updateLocalStorage() {
// 仅在添加或更新时调用此函数
localStorage.setItem('房租记录', JSON.stringify(rentRecords));
}
// 创建新记录对象
const newRecord = {
"日期": new Date(dateInput).toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
}).replace(/\//g, '年'), // 将“/”替换为“年”
"房租": rentInput,
"水表": waterInput,
"电表": electricInput,
"备注": noteInput,
"禁止删除": false // 新增加的记录默认为可以删除
};
// 添加删除功能
document.getElementById('deleteButton').addEventListener('click', function () {
const checkedBoxes = document.querySelectorAll('.recordCheckbox:checked');
if (checkedBoxes.length === 0) {
alert('请至少选择一个记录来删除。');
return;
}
const confirmDelete = confirm('您确定要删除选中的记录吗？');
if (!confirmDelete) {
return; // 用户选择了取消，不执行删除
}
checkedBoxes.forEach(checkbox => {
const index = parseInt(checkbox.dataset.index, 10);
const record = rentRecords[index];
// 只删除不带有 '禁止删除': true 的记录
if (!record.禁止删除) {
rentRecords.splice(index, 1); // 从数组中删除记录
} else {
alert(`本地记录 '${record.日期}' 不允许删除。`); // 提示用户该记录不可删除
}
});
// 更新 localStorage 和重新渲染数据
updateLocalStorage();
renderData();
});
renderData(); // 渲染数据
</script>
<!-- 倒计时 -->
<script>
/* 倒计时功能实现开始*/
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.innerHTML = `${endDateStr}(${promptText})<br> ${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}」 <br>
<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 = '';
}
/* 倒计时功能实现 结束*/
</script>
<!-- 倒计时 结束 -->
<script>
function validatePassword(password) {
return password === "134007"; // 可以根据需求修改密码验证逻辑
}
document.addEventListener("DOMContentLoaded", function () {
const loginButton = document.getElementById("mobileLoginButton");
const passwordMemoContainer = document.querySelector(".containerPasswordMemoTable");
const passwordInput = createPasswordInput();
const errorMessage = createErrorMessage();
const mobileLoginForm = document.getElementById("mobileLoginForm");
mobileLoginForm.insertBefore(errorMessage, loginButton);
mobileLoginForm.insertBefore(passwordInput, loginButton);
loginButton.addEventListener("click", function (event) {
event.preventDefault(); // 防止表单提交
handleLoginClick(passwordMemoContainer, loginButton, passwordInput, errorMessage);
});
});
function createPasswordInput() {
const input = document.createElement("input");
input.setAttribute("type", "password");
input.setAttribute("placeholder", "请输入密码");
return input;
}
function createErrorMessage() {
const div = document.createElement("div");
div.style.color = "red"; // 设置提示文本颜色为红色
div.style.display = "none"; // 初始隐藏错误提示
return div;
}
function handleLoginClick(passwordMemoContainer, loginButton, passwordInput, errorMessage) {
const isLoggingOut = loginButton.textContent === "退出登录";
if (isLoggingOut) {
// 处理退出登录逻辑
passwordMemoContainer.style.display = "none";
loginButton.textContent = "登录"; // 修改为“登录”
passwordInput.value = ""; // 清空密码输入框
passwordInput.style.display = " inline-block"; // 显示密码输入框
loginButton.style.display = " inline-block"; // 显示登录按钮
} else {
// 登录逻辑
if (validatePassword(passwordInput.value)) {
errorMessage.style.display = "none"; // 隐藏错误提示
passwordMemoContainer.style.display = "block"; // 显示密码备忘录部分
passwordInput.value = ""; // 清空密码输入框
passwordInput.style.display = "none"; // 隐藏密码输入框
loginButton.textContent = "退出登录"; // 修改按钮文本为"退出登录"
loginButton.style.display = "block"; // 显示退出按钮
} else {
errorMessage.textContent = "密码错误，请重试"; // 设置错误提示文本
errorMessage.style.display = "block"; // 显示错误提示
}
}
}
</script>
<script>
const accountDataList = [{
website: "QQ",
accounts: [{
account: "454545",
password: "gh54545",
note: "没有备注",
"禁止删除": true
},
{
account: "4242424",
password: "r4242g",
note: "没有备注",
"禁止删除": true,
},
]
},
{
website: "微信",
accounts: [{
account: "手机号",
password: "ewe31",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "Steam",
accounts: [{
account: "qee34",
password: "eqeqern",
note: "3424228@qq.com",
"禁止删除": true
}]
},
{
website: "12123",
accounts: [{
account: "手机号",
password: "eqe34",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "WeGame",
accounts: [{
account: "332424",
password: "ewerwer",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "csdn博客",
accounts: [{
account: "手机号",
password: "332qq",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "原神",
accounts: [{
account: "13422566556",
password: "32323",
note: "没有备注",
"禁止删除": true
},
{
account: "手机号",
password: "323233",
note: "没有备注",
"禁止删除": true
}
]
},
{
website: "gitee",
accounts: [{
account: "手机号",
password: "23242",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "Microsoft",
accounts: [{
account: "242426@qq.com",
password: "4242424",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "网易",
accounts: [{
account: "42f2g@163.com",
password: "23233",
note: "手机找回,异人",
"禁止删除": true
},
{
account: "1323m@163.com",
password: "32323",
note: "147金刚甲-",
"禁止删除": true
},
{
account: "242ff12",
password: "32f3in",
note: "146异人2、",
"禁止删除": true
},
{
account: "323238@163.com",
password: "323123+",
note: "原神冒险等阶=50 ,,6221807130000567756",
"禁止删除": true
},
{
account: "l32387zhongl@163.com",
password: "Q3233456",
note: "原神冒险等阶=50 310109195105145256",
"禁止删除": true
},
]
},
{
website: "哔哩哔哩",
accounts: [{
account: "152",
password: "手机短信",
note: "手机短信",
"禁止删除": true
},
]
}
];
// 生成表格函数
function generateTable(data, tableId) {
const table = document.getElementById(tableId);
if (!table) {
console.error('表格元素未找到');
alert('表格元素未找到，请检查页面结构。');
return;
}
table.innerHTML = ``;
data.forEach(item => {
item.accounts.forEach((account, index) => {
const row = table.insertRow();
if (index === 0) {
const websiteCell = row.insertCell();
websiteCell.textContent = item.website;
websiteCell.rowSpan = item.accounts.length;
} else {
row.insertCell().style.display = 'none';
}
const accountCell = row.insertCell();
accountCell.innerHTML =
`${account.account}
<button onclick="showPassword(this, '${account.password}', '${account.note}', ${account['禁止删除']}, '${item.website}', '${account.account}')">密码</button>`;
// 检查 "禁止删除" 属性，并设置相应的样式
if (account["禁止删除"]) {
accountCell.classList.add('forbidden'); // 添加禁止删除类
} else {
accountCell.classList.add('allowed'); // 添加允许删除类
}
});
});
}
// 显示密码函数
function showPassword(button, password, note, isDeleteAllowed, website, account) {
const passwordCell = button.parentElement;
if (!passwordCell.querySelector('p')) {
const passwordSpan = document.createElement('p');
passwordSpan.textContent = password;
passwordCell.appendChild(passwordSpan);
const detailsElement = document.createElement('p');
detailsElement.innerHTML = `${note}`;
passwordCell.appendChild(detailsElement);
let deleteButton; // 定义删除按钮的变量
if (!isDeleteAllowed) {
deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.style.color = 'red';
deleteButton.onclick = () => deleteAccount(website, account);
passwordCell.appendChild(deleteButton);
}
let countdown = 5;
button.innerHTML = `显示<b>${countdown}</b>秒`;
const countdownInterval = setInterval(() => {
countdown--;
button.innerHTML = `显示<b>${countdown}</b>秒`
if (countdown < 0) {
clearInterval(countdownInterval);
passwordCell.removeChild(passwordSpan);
passwordCell.removeChild(detailsElement);
button.textContent = "密码"; // 恢复按钮文本
if (deleteButton) { // 如果存在删除按钮，则隐藏它
deleteButton.style.display = 'none';
}
}
}, 1000);
}
}
// 加载初始数据
function loadInitialData() {
generateTable(accountDataList, 'accountDataListTable'); // 渲染默认数据
let storedData = loadData();
generateTable(storedData, 'accountPasswordMemoTable'); // 渲染localStorage数据
}
// 从localStorage加载数据
function loadData() {
const storedData = localStorage.getItem('账号数据');
return storedData ? JSON.parse(storedData) : [];
}
// 数据保存
function saveData(data) {
localStorage.setItem('账号数据', JSON.stringify(data));
}
// 添加数据
function addAccount(website, account, password, note) {
let data = loadData();
const existingWebsite = data.find(item => item.website === website);
if (existingWebsite) {
existingWebsite.accounts.push({ account, password, note, "禁止删除": false });
} else {
data.push({ website, accounts: [{ account, password, note, "禁止删除": false }] });
}
saveData(data);
generateTable(data, 'accountPasswordMemoTable'); // 更新localStorage表格
}
// 表单提交事件
document.getElementById('accountPasswordMemoForm').addEventListener('submit', function (event) {
event.preventDefault();
addAccount(
document.getElementById('inputWebsite').value,
document.getElementById('inputAccount').value,
document.getElementById('inputPassword').value,
document.getElementById('inputNote').value
);
this.reset(); // 清空输入框
});
// 删除账号的函数
function deleteAccount(website, account) {
// 提示用户确认删除
const confirmDelete = confirm(`确定要删除 ${website} 的数据吗？`);
if (!confirmDelete) {
return; // 如果用户点击了取消，退出函数
}
let data = loadData(); // 从 localStorage 加载数据
const existingWebsite = data.find(item => item.website === website);
if (existingWebsite) {
existingWebsite.accounts = existingWebsite.accounts.filter(acc => acc.account !== account); // 删除指定账号
// 如果网站下没有账号了，删除网站
if (!existingWebsite.accounts.length) {
data = data.filter(item => item.website !== website);
}
saveData(data); // 保存更新后的数据
generateTable(data, 'accountPasswordMemoTable'); // 更新表格
}
}
// 在页面加载时执行
loadInitialData();
</script>
</html>
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
