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.rhkb.cn/news/376449.html

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

相关文章

Excel第31享:基于left函数的截取式数据裂变

1、需求描述 如下图所示&#xff0c;在“Excel第30享”中统计2022年YTD各个人员的“上班工时&#xff08;a2&#xff09;”&#xff0c;需要基于工时明细表里的“日期”字段建立辅助列&#xff0c;生成“年份”字段&#xff0c;本文说明“年份”字段是怎么裂变而来的。 下图为…

AI时代:探索个人潜能的新视角

文章目录 Al时代的个人发展1 AI的高速发展意味着什么1.1 生产力大幅提升1.2 生产关系的改变1.3 产品范式1.4 产业革命1.5 Al的局限性1.5.1局限一:大模型的幻觉 1.5.2 局限二&#xff1a;Token 2 个体如何应对这种改变?2.1 职场人2.2 K12家长2.3 大学生2.4 创业者 3 人工智能发…

单相整流-TI视频课笔记

目录 1、单相半波整流 1.1、单相半波----电容滤波---超轻负载 1.2、单相半波----电容滤波---轻负载 1.3、单相半波----电容滤波---重负载 2、全波整流 2.1、全波整流的仿真 2.2、半波与全波滤波的对比 3、全桥整流电路 3.1、全波和全桥整流对比 3.2、半波全波和全桥…

高职计算机网络实训室

一、高职计算机网络实训室建设的背景 如今&#xff0c;数字化发展已成为国家发展的战略方向&#xff0c;是推动社会进步和经济发展的重要动力。在这一时代背景下&#xff0c;计算机网络技术作为数字化发展的基础设施&#xff0c;其地位和作用愈发凸显。因此&#xff0c;高职院…

数据结构(空间复杂度介绍)超详细!!!

1. 数据结构前言 1.1 数据结构 数据结构是计算机存储、组织数据的形式&#xff0c;指相互之间存在一种或多种特定关系的数据元素的集合 1.2 算法 算法&#xff1a;良好的计算过程&#xff0c;它取一个或一组的值为输入&#xff0c;并产生出一个或一组的值作为输出。即算法经…

UART编程

Q:为什么使用串口前要先在电脑上安装CH340驱动&#xff1f; 中断的作用&#xff1f; 环形buffer的作用&#xff1f; static和valitate的作用 三种编程方式简介 也可以通过DMA方式减小CPU资源的消耗 直接把数据在SRAM内存和UART模块进行传输 &#xff0c;流程&#xff1a; …

css文字自适应宽度动态出现省略号...

前言 在列表排行榜中通常会出现的一个需求&#xff1a;从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标&#xff0c;徽标长度是动态的&#xff0c;昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示&#xff08;花里胡哨的底色是…

接口安全配置

问题点&#xff1a; 有员工在工位在某个接口下链接一个集线器&#xff0c;从而扩展上网接口&#xff0c;这种行为在某些公司是被禁止的&#xff0c;那么网络管理员如何控制呢&#xff1f;可以配置接口安全来限制链接的数量&#xff0c;切被加入安全的mac地址不会老化&#xff…

防火墙NAT智能选举综合实验

一、实验目的 1&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2&#xff0c;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3&#xff0c;多出口环境基于带宽比例进行选路&…

Anaconda+Pycharm 项目运行保姆级教程(附带视频)

最近很多小白在问如何用anacondapycharm运行一个深度学习项目&#xff0c;进行代码复现呢&#xff1f;于是写下这篇文章希望能浅浅起到一个指导作用。 附视频讲解地址&#xff1a;AnacondaPycharm项目运行实例_哔哩哔哩_bilibili 一、项目运行前的准备&#xff08;软件安装&…

护网HW面试常问——组件中间件框架漏洞(包含流量特征)

apache&iis&nginx中间件解析漏洞 参考我之前的文章&#xff1a;护网HW面试—apache&iis&nginx中间件解析漏洞篇-CSDN博客 log4j2 漏洞原理&#xff1a; 该漏洞主要是由于日志在打印时当遇到${后&#xff0c;以:号作为分割&#xff0c;将表达式内容分割成两部…

Linux的世界 -- 初次接触和一些常见的基本指令

一、Linux的介绍和准备 1、简单介绍下Linux的发展史 1991年10月5日&#xff0c;赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组(comp.os.minix&#xff09;中宣布他编制出了一种类似UNIX的小操作系统&#xff0c;叫Linux。新的操作系统是受到另一个UNIX的…

WGCLOUD的ping设备监测可以导入excel数据吗

可以的 WGCLOUD的v3.5.3版本&#xff0c;已经支持导入excel数据&#xff0c;如下说明 数通设备PING监测使用说明 - WGCLOUD

FreeRTOS学习(1)STM32单片机移植FreeRTOS

一、FreeRTOS源码的下载 1、官网下载 FreeRTOS官方链接 官方下载速度慢&#xff0c;需要翻墙&#xff0c;一般选择第一个 2、直接通过仓库下载 仓库地址链接 同样很慢&#xff0c;甚至打不开网页&#xff0c;也不建议使用这种方法。 3、百度网盘 链接&#xff1a;https:…

Java | Leetcode Java题解之第234题回文链表

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isPalindrome(ListNode head) {if (head null) {return true;}// 找到前半部分链表的尾节点并反转后半部分链表ListNode firstHalfEnd endOfFirstHalf(head);ListNode secondHalfStart reverseList(firs…

百度智能云将大模型引入网络故障定位的智能运维实践

物理网络中&#xff0c;某个设备发生故障&#xff0c;可能会引起一系列指标异常的告警。如何在短时间内从这些告警信息中找到真正的故障原因&#xff0c;犹如大海捞针&#xff0c;对于运维团队是一件很有挑战的事情。 在长期的物理网络运维工作建设中&#xff0c;百度智能云通…

OpenCV距离变换函数distanceTransform的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 distanceTransform是OpenCV库中的一个非常有用的函数&#xff0c;主要用于计算图像中每个像素到最近的背景&#xff08;通常是非零像素到零像素&…

数据结构(4.1)——串的存储结构

串的顺序存储 串&#xff08;String&#xff09;的顺序存储是指使用一段连续的存储单元来存储字符串中的字符。 计算串的长度 静态存储(定长顺序存储) #define MAXLEN 255//预定义最大串为255typedef struct {char ch[MAXLEN];//每个分量存储一个字符int length;//串的实际长…

【机器学习】精准农业新纪元:机器学习引领的作物管理革命

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#x1f4d2;2. 精准农业的背景与现状&#x1f341;精准农业的概念与发展历程&#x1f342;国内外精准农业实践案…

MySQL-ubuntu环境下安装配置mysql

文章目录 什么是数据库&#xff1f;一、ubuntu环境下安装mysql二、配置mysql配置文件1.先登上root账号2.配置文件的修改show engines \G; mysql和mysqld数据库的基础操作登录mysql创建数据库显示当前数据库使用数据库创建表插入students表数据打印students表数据select * from …