标签：website account document const 删除 按钮 password data 页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>账号密码备忘录</title>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #144756;
}
.containerPasswordMemoTable {
display: none;
background-color: #144756;
}
#accountPasswordMemoTable {
text-align: center;
user-select: none;
width: 100%;
}
#accountPasswordMemoTable th {
color: #ebf704;
background-color: #555;
}
#accountPasswordMemoTable td {
color: hsl(160, 98%, 47%);
text-shadow: 1px 1px 1px #100000;
}
#accountPasswordMemoTable button {
color: hsla(0, 0%, 100%, 0.63);
background-color: rgba(85, 85, 85, 0.5);
text-shadow: 1px 1px 1px #100000;
border: none;
font-size: 16px;
}
#accountPasswordMemoTable p {
user-select: text;
background-color: rgba(220, 0, 0, 1);
color: rgb(255, 213, 0);
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
background-image: linear-gradient(150deg, #5f2093, transparent);
}
#accountPasswordMemoTable b {
color: rgb(255, 255, 255);
text-shadow: 1px 1px 1px #000;
}
</style>
</head>
<body>
<form id="mobileLoginForm">
<button id="mobileLoginButton">登录</button>
</form>
<div class="containerPasswordMemoTable">
<form id="accountPasswordMemoForm">
<input type="text" id="inputWebsite" placeholder="请输入网站名称">
<input type="text" id="inputAccount" placeholder="请输入账号">
<input type="password" id="inputPassword" placeholder="请输入密码">
<input type="text" id="inputNote" placeholder="请输入备注">
<button type="submit">添加</button>
</form>
<table id="accountPasswordMemoTable" border="1">
<tr>
<th>网站</th>
<th>账号</th>
</tr>
</table>
</div>
<script>
const accountDataList = [{
website: "QQ",
accounts: [{
account: "5555",
password: "5555",
note: "没有备注",
"禁止删除": true
},
{
account: "99999",
password: "9993",
note: "没有备注",
"禁止删除": true,
},
]
},
{
website: "微信",
accounts: [{
account: "手机号",
password: "8883",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "Steam",
accounts: [{
account: "88888",
password: "8888n",
note: "[email protected]",
"禁止删除": true
}]
},
{
website: "csdn博客",
accounts: [{
account: "手机号",
password: "81dayudian583",
note: "没有备注",
"禁止删除": true
}]
},
{
website: "原神",
accounts: [{
account: "1111",
password: "81DRL583",
note: "没有备注",
"禁止删除": true
},
{
account: "手机号",
password: "81DRL583",
note: "没有备注",
"禁止删除": true
}
]
}
];
// 从localStorage加载数据
function loadData() {
const storedData = localStorage.getItem('accountData');
return storedData ? JSON.parse(storedData) : [];
}
// 将数据保存到localStorage
function saveData(data) {
localStorage.setItem('accountData', JSON.stringify(data));
}
let data = loadData();
if (data.length === 0) {
data = accountDataList;
saveData(data); // 将初始化数据保存到localStorage
}
// 去重处理
function removeDuplicates(data) {
return data.map(item => {
const uniqueAccounts = [];
const accountSet = new Set();
item.accounts.forEach(account => {
const accountKey = `${item.website}-${account.account}-${account.password}`;
if (!accountSet.has(accountKey)) {
accountSet.add(accountKey);
uniqueAccounts.push(account);
}
});
return {
...item,
accounts: uniqueAccounts
};
});
}
const uniqueData = removeDuplicates(data);
// 生成表格
function generateTable(data) {
const table = document.getElementById('accountPasswordMemoTable');
if (!table) {
console.error('表格元素未找到');
alert('表格元素未找到，请检查页面结构。');
return;
}
table.innerHTML = `
<tr>
<th width="110">网站</th>
<th width="1000">账号</th>
</tr>
`;
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>`;
});
});
}
generateTable(uniqueData); // 生成初始表格
// 添加数据的函数
document.getElementById('accountPasswordMemoForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交
const website = document.getElementById('inputWebsite').value;
const account = document.getElementById('inputAccount').value;
const password = document.getElementById('inputPassword').value;
const note = document.getElementById('inputNote').value;
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); // 保存数据到localStorage
generateTable(removeDuplicates(data)); // 生成更新后的表格
document.getElementById('accountPasswordMemoForm').reset(); // 清空输入框
});
// 显示密码函数
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 = 9;
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 deleteAccount(website, account) {
const existingWebsite = data.find(item => item.website === website);
if (existingWebsite) {
existingWebsite.accounts = existingWebsite.accounts.filter(acc => acc.account !== account);
if (existingWebsite.accounts.length === 0) {
data = data.filter(item => item.website !== website);
}
saveData(data); // 更新localStorage
generateTable(removeDuplicates(data)); // 更新表格
}
}
</script>
<script>
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"; // 显示错误提示
}
}
}
function validatePassword(password) {
return password === "1"; // 可以根据需求修改密码验证逻辑
}
</script>
</body>
</html>
标签：website,
account,
document,
const,
删除,
按钮,
password,
data,
页面
From： https://blog.csdn.net/lulei5153/article/details/143279353