<!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"><imgsrc="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; // 设置rowSpanwebsiteCell.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>