html表格账号密码备忘录：表格内容将通过JavaScript动态生成。点击查看密码10秒关闭

本文链接：https://blog.csdn.net/lulei5153/article/details/140393011
<!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>