html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>账号密码备忘录</title>
<style>
body {
background: #2c3e50;
text-shadow: 1px 1px 1px #100000;
}
/* 首页样式开始 */
.home_page {
color: #ffffffa4;
text-shadow: 1px 1px 1px #100000;
border: 1px solid #4CAF50;
font-size: 20px;
padding: 2px 5px;
border-radius: 5px;
text-decoration: none;
/* 粗体 */
font-weight: bold;
cursor: pointer;
/* 往上移动一点 */
position: relative;
top: -4px;
&:hover {
background-color: #e4f904;
color: rgb(245, 5, 5);
}
}
/* 首页样式结束 */
/* 关闭按钮样式 */
#closeBtn {
color: #d6d301;
font-weight: bold;
cursor: pointer;
margin-left: 400px;
background-color: #839aa17d;
border: none;
border-radius: 5px;
padding: 5px 10px;
position: relative;
top: -4px;
img {
width: 30px;
cursor: pointer;
}
&:hover {
background: #ffd000;
}
}
/* 关闭按钮样式结束 */
table {
border-collapse: collapse;
width: 100%;
tr:nth-child(odd) {
background-color: #144756;
}
th,
td {
border: 1px solid rgba(255, 255, 255, 0.532);
padding: 8px;
text-align: center;
}
th {
color: #ebf704;
background-color: #555;
}
td {
color: hsla(160, 100%, 37%, 0.63);
}
/* 第6个元素左对齐 */
details,
th:nth-child(6) {
text-align: left;
}
button {
color: hsla(0, 0%, 100%, 0.63);
background-color: #55555582;
text-shadow: 1px 1px 1px #100000;
border: 0;
font-size: 18px;
}
span {
color: #ff0000;
}
.center {
text-align: center;
}
input {
/* 设置字体大小 */
font-size: 20px;
/* 表格边框 */
border: 0px solid black;
background-color: rgba(220, 0, 0, 1);
color: rgb(255, 213, 0);
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
box-shadow:
inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
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));
}
}
</style>
</head>
<body>
<a href="file:///D:/web/html首页/备忘录.html" class="home_page">首页</a> <button id="closeBtn" type="button"><img
src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button>
<!-- accountTable账号列表 -->
<table id="accountTable">
<tr>
<th width="50">序号</th>
<th width="50">网数</th>
<th width="110">网站</th>
<th width="230">账号</th>
<th width="200">密码</th>
<th width="1000">备注 (点击查看详情)</th>
</tr>
<!-- 数据行将通过JavaScript动态生成 -->
</table>
<script>
const data = [
{
website: "QQ",
accounts: [
{ account: "newAccount1", password: "newPassword1", note: "新备注1" },
{ account: "newAccount2", password: "newPassword2", note: "新备注2" },
]
},
{
website: "微信",
accounts: [
{ account: "newAccount3", password: "newPassword3", note: "新备注3" }
]
},
{
website: "Steam",
accounts: [
{ account: "newAccount4", password: "newPassword4", note: "新备注4" }
]
},
{
website: "12123",
accounts: [
{ account: "newAccount5", password: "newPassword5", note: "新备注5" }
]
},
{
website: "WeGame",
accounts: [
{ account: "newAccount6", password: "newPassword6", note: "新备注6" }
]
},
{
website: "csdn博客",
accounts: [
{ account: "newAccount7", password: "newPassword7", note: "新备注7" }
]
},
{
website: "原神",
accounts: [
{ account: "newAccount8", password: "newPassword8", note: "新备注8" }
]
},
{
website: "gitee",
accounts: [
{ account: "newAccount9", password: "newPassword9", note: "新备注9" }
]
},
{
website: "Microsoft",
accounts: [
{ account: "newAccount10", password: "newPassword10", note: "新备注10" }
]
},
{
website: "网易",
accounts: [
{ account: "newAccount11", password: "newPassword11", note: "新备注11" },
{ account: "newAccount12", password: "newPassword12", note: "新备注12" },
{ account: "newAccount13", password: "newPassword13", note: "新备注13" },
{ account: "newAccount14", password: "newPassword14", note: "新备注14" },
{ account: "newAccount15", password: "newPassword15", note: "新备注15" },
{ account: "newAccount16", password: "newPassword16", note: "新备注16" },
]
},
{
website: "哔哩哔哩",
accounts: [
{ account: "newAccount17", password: "newPassword17", note: "新备注17" },
{ account: "newAccount18", password: "newPassword18", note: "新备注18" }
]
}
];
// 去重处理
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);
// console.log(JSON.stringify(uniqueData, null, 2));
const table = document.getElementById('accountTable'); // 获取表格元素
if (table) {
let rowIndex = 1;
let lastWebsite = null;
let websiteRowSpan = 1;
uniqueData.forEach((item, index) => { // 遍历数据
item.accounts.forEach((account, accountIndex) => {
const row = table.insertRow(); // 创建行
row.insertCell().textContent = rowIndex++; // 账号序号
row.insertCell().textContent = index + 1 + '-' + (item.accounts.indexOf(account) + 1); // 网站序号+账号序号
const websiteCell = row.insertCell(); // 创建网站单元格
if (item.website !== lastWebsite) {
websiteCell.textContent = item.website; // 网站
websiteCell.rowSpan = item.accounts.length; // 设置rowSpan
websiteCell.classList.add('center'); // 居中
lastWebsite = item.website;
} else {
websiteCell.remove(); // 移除重复的网站单元格
}
row.insertCell().textContent = account.account; // 账号
const passwordCell = row.insertCell(); // 创建密码单元格
const passwordButton = document.createElement('button'); // 创建按钮元素
passwordButton.textContent = '查看密码'; // 按钮文本
passwordButton.onclick = () => {
// 检查passwordCell中是否已经存在input元素
if (!passwordCell.querySelector('input')) {
const passwordInput = document.createElement('input');
// passwordInput.type = 'password';// 密码输入框类型为密码，看不见
passwordInput.value = account.password;
passwordCell.appendChild(passwordInput);
// 创建倒计时显示元素
const countdownElement = document.createElement('span');
countdownElement.textContent = '10';
passwordCell.appendChild(countdownElement);
// 设置倒计时
let countdown = 10;
const countdownInterval = setInterval(() => {
countdown--;
countdownElement.textContent = countdown.toString();
if (countdown <= 0) {
clearInterval(countdownInterval);
passwordCell.removeChild(passwordInput);
passwordCell.removeChild(countdownElement);
}
}, 1000); // 每秒更新一次
}
};
passwordCell.appendChild(passwordButton); // 密码单元格添加按钮元素
const noteCell = row.insertCell(); // 创建备注单元格
// noteCell.textContent = account.note; // 直接显示备注
noteCell.innerHTML = `<details>${account.note}</details>`; // 点击查看备注
});
});
} else {
console.error('表格元素未找到');
alert('表格元素未找到，请检查页面结构。');
}
// 关闭当前窗口
function closeAll() {
window.close();
}
</script>
</body>
</html>
