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

 

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/46032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Linux系统编程篇》Visual Studio Code配置下载,中文配置,连接远程ssh ——基础篇

引言 vscode绝对值得推荐&#xff0c;非常好用&#xff0c;如果你能体会其中的奥妙的话。 工欲善其事&#xff0c;必先利其器 ——孔子 文章目录 引言下载VS Code配置VS Code中文扩展连接服务器 连接服务器测试确定服务器的IP地址VS code 配置ssh信息选择连接到主机选择这个添…

韦东山嵌入式linux系列-驱动设计的思想(面向对象/分层/分离)

1 面向对象 字符设备驱动程序抽象出一个 file_operations 结构体&#xff1b; 我们写的程序针对硬件部分抽象出 led_operations 结构体。 2 分层 上下分层&#xff0c;比如我们前面写的 LED 驱动程序就分为 2 层&#xff1a; ① 上层实现硬件无关的操作&#xff0c;比如注册…

防御第二次作业完成接口配置实验

一、实验括扑图 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 1、配置各设备的IP地址 2、划分VLAN及VLAN的相关配置 3、配置路由及安全策略 四、实验步骤 1、配置PC跟Client还有server配置&#xff0…

【C++】初始化列表”存在的意义“和“与构造函数体内定义的区别“

构造函数是为了方便类的初始化而存在&#xff0c;而初始化时会遇到const成员变量、引用成员变量等&#xff0c;这些变量不允许函数内赋值&#xff0c;必须要在初始化时进行赋值&#xff0c;所以就有了初始化列表&#xff0c;初始化列表只能存在于类的构造函数中&#xff0c;用于…

Spring Boot快速上手

一&#xff0c;什么是spring 首先登陆Spring官网&#xff0c;看一下官网如何形容的&#xff0c; 可以看出Spring是为了使java程序更加快速&#xff0c;方便&#xff0c;安全所做出的java框架。 1.Spring Boot Spring Boot的诞生就是为了简化Spring的开发&#xff0c;也就是更…

gfast前端UI:基于Vue3与vue-next-admin适配手机、平板、pc 的后台开源模板

摘要 随着现代软件开发的高效化需求&#xff0c;一个能够快速适应不同设备、简化开发过程的前端模板变得至关重要。gfast前端UI&#xff0c;基于Vue3.x和vue-next-admin&#xff0c;致力于提供这样一个解决方案。本文将深入探讨gfast前端UI的技术栈、设计原则以及它如何适配手机…

【VS2019】安装下载库HtmlAgilityPack,可解析 HTML (图文详情)

目录 0.背景 1.环境 2.详细步骤 0.背景 项目需要&#xff0c;搭建WCF服务&#xff0c;需求是输入一个string类型字符串&#xff08;网页代码&#xff0c;如<html><body><p>Hello, <b>World</b>!</p></body></html>&#xf…

刷题之单词规律同构字符串(leetcode)

同构字符串 单词规律 两个都是映射关系&#xff0c;用两张哈希表记录互相映射就可以了 同构字符串&#xff1a; class Solution { public:bool isIsomorphic(string s, string t) {//用两张哈希表做映射if(s.size()!t.size()){return false;}unordered_map<char,char&…

清华计算几何-ConvexHull(凸包)-极点InTriangle/ToLeft Test

ConvexHull(凸包)的基本概念 给定一个点集, 求出最外围的点所形成的几何, 就是凸包。如下所示 凸包在计算几何是一个非常基础和核心的一个概念, 很多几何计算算法都围绕凸包展开。 极点和非极点 如上图所示, 蓝图圈圈住的点都是极端点, 极端点具备一个重要的特性: 极点(ext…

YOLOv10改进 | 特殊场景检测篇 | 单阶段盲真实图像去噪网络RIDNet辅助YOLOv10图像去噪(全网独家首发)

一、本文介绍 本文给大家带来的改进机制是单阶段盲真实图像去噪网络RIDNet&#xff0c;RIDNet&#xff08;Real Image Denoising with Feature Attention&#xff09;是一个用于真实图像去噪的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;旨在解决现有去噪方法在处理…

c# 容器变换

List<Tuple<int, double, bool>> 变为List<Tuple<int, bool>>集合 如果您有一个List<Tuple<int, double, bool>>并且您想要将其转换为一个List<Tuple<int, bool>>集合&#xff0c;忽略double值&#xff0c;您可以使用LINQ的S…

卷积神经网络-猫狗识别实战

课程来自bilibiliMomodel平台 全长只有两个小时&#xff0c;理论部分讲得很粗糙 1 人的视觉和计算机视觉 人的大脑&#xff1a;神经元细胞&#xff0c;轴突发送信号&#xff0c;树突接收信号&#xff0c;互相连接&#xff0c;连接的强度和状态会随着新的经历刺激而变化。 用…

server nat表和会话表的作用及NAT地址转换详细

本章节主要讲nat技术的基础 -会话表的建立也是看5元组 -状态检测技术的回包一样也看5元组&#xff0c;但是状态检测技术会看的除开5元组还有更多东西 老哥&#xff0c;你真的应该好好注意一个东西&#xff1a;我们的会话表只是为了后续包的转发&#xff0c;会话表是记录的首…

【机器学习】和【人工智能】在航空航天中的应用

作者主页: 知孤云出岫 目录 引言机器学习和人工智能在航空航天中的应用1. 预测性维护2. 飞行路径优化3. 自动驾驶飞行器 未来展望1. 增强人机协作2. 更智能的空中交通管理3. 高效的航空制造 结论参考文献 引言 随着科技的迅猛发展&#xff0c;机器学习和人工智能&#xff08;…

【python报错已解决】 “Invalid Array Index“

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法&#xff1a;2.1 方法一&#xff1a;检查索引范…

win32:第一个窗口程序-应用程序入口点(part.6)

第一个窗口程序的最后一部分&#xff1a;应用程序入口函数wWinMain&#xff1b;这是Windows应用程序的主函数&#xff0c;负责初始化应用程序、注册窗口类、创建主窗口并进入消息循环处理消息。 int APIENTRY wWinMain(_In_ HINSTANCE hInstance,_In_opt_ HINSTANCE hPrevInst…

pytorch说明

深度学习中的重要概念&#xff1a; 激活函数&#xff1a; 激活函数的必要性&#xff1a;激活函数不是绝对必须的&#xff0c;但在深度学习中&#xff0c;它们几乎总是被使用。激活函数可以引入非线性&#xff0c;这使得神经网络能够学习更复杂的模式。 激活函数的位置&#x…

用HTML和CSS实现提示工具(tooltip)及HTML元素的定位

所谓提示工具&#xff0c;是指将鼠标移动到某个HTML元素&#xff08;工具&#xff09;时会显示一些提示内容&#xff08;提示文本&#xff09;&#xff0c;而鼠标移出工具元素的范围时提示文本就消失了。考虑到提示文本元素应当在鼠标进入工具元素时显示&#xff0c;鼠标离开工…

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…

STM32入门开发操作记录(二)——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…