HTML5本地存储账号密码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5本地存储账号密码</title>
</head>
<style>* {margin: 0;padding: 0;box-sizing: border-box;/* 文本禁止选中: none; */user-select: none;}body {background-color: #144756;}::placeholder {color: #ff9f05;text-shadow: 1px 1px 1px #100000;}button {/* 鼠标移入变小手 */cursor: pointer;}button,input {border: none;outline: none;height: 32px;font-size: 20px;background-color: green;padding: 0 10px;}/* 标题开始 */.header_title {position: fixed;top: 160px;left: 80px;width: 140px;height: 66px;border-radius: 50%;img {float: left;width: 66px;height: 66px;border-radius: 50%;transition: transform 0.3s ease;&:hover {transform: scale(1.2);}}h2 {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));box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);text-shadow: 0px 1px 0px #999,0px 2px 0px #888,0px 3px 0px #777,0px 4px 0px #666,0px 5px 0px #555,0px 6px 0px #444,0px 7px 0px #333,0px 8px 7px #001135;/* letter-spacing: -8px; */color: #ffffff;background-color: #f30303;border-radius: 50%;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));box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);border: 0px solid black;}}/* 标题结束 *//* 查看按钮开始 */.search_text {position: relative;top: 2px;left: 345px;/* 首页按钮 开始*/.home_page {position: absolute;top: 0px;left: -200px;background-color: #4CAF50;color: white;border: 1px solid #4CAF50;&:hover {background-color: #ddd;color: rgb(245, 5, 5);}}a {font-size: 22px;float: left;margin: 0 15px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;color: rgb(252, 232, 130);&:hover:not(.home_page) {background-color: #ddd;font-size: 26px;color: rgb(255, 255, 255);}}/* 首页按钮 结束*/input {border-radius: 50px;z-index: 5;box-shadow: 0px 0px 24px rgba(253, 253, 253, 0.333);}button {position: absolute;top: 0.5px;left: 203px;height: 30px;border-radius: 0 50px 50px 0;background-color: rgb(255, 0, 0);color: #ffffff;&:hover {background-color: rgb(7, 7, 7);color: #ff0101;}&:active {background-color: rgba(255, 209, 3, 0.986);color: #fcf9f9;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}}span {color: #fffdfd;text-shadow: 1px 1px 1px #100000;}}/* 查看按钮结束 *//* 显示查看开始 */#find_result {position: relative;top: 2px;left: 345px;text-shadow: 1px 1px 1px #100000;color: #fff;span {border-radius: 50px;user-select: text;color: rgb(254, 255, 254);padding: 0 10px;background-color: rgb(255, 0, 0);font-size: 26px;}}/* 显示查看结束 *//* 新增输入框开始 */.userform {display: flex;flex-direction: column;position: absolute;top: 40px;left: 30px;input:nth-child(1) {border-radius: 48px 48px 0 0;box-shadow: 0px -8px 24px rgba(255, 255, 255, 0.333);}input:nth-child(2) {position: relative;top: 0px;left: -25px;border-radius: 50px;&::placeholder {position: relative;top: 0px;left: 25px;}background-color: rgba(1, 112, 1, 0.219);}input:nth-child(3) {border-radius: 0 0 48px 48px;box-shadow: 0px 8px 24px rgba(255, 255, 255, 0.333);}input {padding: 16px 52px 16px 35px;border: none;outline: none;width: 100%;font-size: 16px;color: #fffafa;background: linear-gradient(to right, rgba(0, 128, 0, 0.292), green);}button {position: absolute;top: 0px;left: 200px;width: 95px;height: 95px;padding: 2px;border-radius: 50%;font-size: 60px;background-color: green;box-shadow: 8px 0px 24px rgba(255, 255, 255, 0.333);&:hover {background-color: #0c333f;color: #ffffff;}&:active {background-color: rgba(255, 209, 3, 0.986);color: #fcf9f9;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}.plus {display: block;width: 100%;height: 100%;background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);background-size: 50% 2px, 2px 50%;background-position: center;background-repeat: no-repeat;}}button::before {content: "";position: absolute;top: 0px;left: -220px;width: 100%;height: 100%;background-color: rgb(1, 84, 1);border-radius: 50%;z-index: -1;box-shadow: -8px 0px 24px rgba(255, 255, 255, 0.333);}}/* 新增输入框结束 *//* 表格样式开始 */#list {table {position: relative;top: 3px;left: 345px;text-shadow: 1px 1px 1px #100000;color: #ffffff;td {text-align: center;font-size: 20px;button {background-color: #0c333f;border-radius: 50%;color: #ffffff;cursor: no-drop;}input {background-color: #0c333f;/* 鼠标移入变小手 */cursor: pointer;};}th:nth-child(3n),td:nth-child(3n) {display: none;}}td:nth-child(2n) {/*文本可以选中复制*/user-select: text;color: green;padding: 0 10px;}button,input {border: none;outline: none;height: 32px;font-size: 20px;background-color: green;padding: 0 10px;}button {background-color: rgba(255, 0, 0, 0.064);color: #ff0101;text-shadow: 1px 1px 1px #100000;/* 粗字体 */font-weight: bold;&:hover {background-color: rgb(255, 0, 0);color: #ffffff;}&:active {background-color: rgba(255, 209, 3, 0.986);color: #fcf9f9;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}}td input {&:hover {background-color: rgb(7, 7, 7);color: #ff0101;}&:active {background-color: rgba(255, 209, 3, 0.986);color: #fcf9f9;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),inset 2px 2px 3px rgba(0, 0, 0, 0.6);}}/* 表格样式结束 */}/* 复选框样式开始 */input[type="checkbox"] {margin: 0px 10px;-webkit-appearance: none;appearance: none;width: 25px;height: 25px;position: relative;border-radius: 50%;}input[type="checkbox"]::after {content: "";width: 100%;height: 100%;border: 2px solid #e9f504;position: absolute;left: -3px;top: -3px;border-radius: 50%;}/* 设置复选框点击之后的样式*/input[type="checkbox"]:checked::after {height: 15px;width: 25px;border-top: none;border-right: none;border-radius: 0;transform: rotate(-45deg);transition: all 0.5s ease-in-out;}/* 设置复选框点击之后的样式结束*//* 复选框样式结束 */
</style>
<body><div class="header_title"><img src="file:///D:\My homepage\img\jpg\tuzi3.jpg" alt="与妖为邻"><h2>账号</h2><h2>密码</h2></div><div><form class="search_text" onsubmit="findOne(event)" action="#"><a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a><input type="text" id="search_site" name="search_site" placeholder="请输入账号查看密码" /><button onclick="findOne()">查看</button> <span>提示:有个问题是账号和密码一样才能删除。虽然有点乱,但也记录了很多新知识</span></form><hr /><p id="find_result"></p><hr /><form class="userform" action="#"><input type="text" id="keyname" name="keyname" class="text" placeholder="请输入账号" /><input type="password" id="sitename" name="sitename" class="text" placeholder="请输入密码" /><input type="text" id="siteurl" name="siteurl" placeholder="请输入说明" /><button onclick="save()"> <i class="plus"></i></button></form></div><div id="list"></div><script>//保存数据  userAll();function save() {var site = new Object;site.keyname = document.getElementById("keyname").value;site.sitename = document.getElementById("sitename").value;site.siteurl = document.getElementById("siteurl").value;var tode = JSON.stringify(site); //将对象转换为JSON字符串localStorage.setItem(site.keyname, tode);// alert("保存成功");userAll();// 清空输入框document.getElementById("keyname").value = "";document.getElementById("sitename").value = "";document.getElementById("siteurl").value = "";}//查询数据    function findOne(event) {event.preventDefault(); // 阻止表单提交var search_site = document.getElementById("search_site").value;var siteurl = localStorage.getItem(search_site);var site = JSON.parse(siteurl);var find_result = document.getElementById("find_result");find_result.innerHTML = '<span>' + search_site + '</span>' + "的密码是:" + '<span>' + site.sitename + '</span>';}//显示数据function userAll() {var list = document.getElementById("list");if (localStorage.length > 0) {var result = "<table border='1'>";result += "<tr><th>序号</th><th>账号</th><th>密码</th><th>说明</th><th> <button id='delete'>删除</button></th></tr>";for (var i = 0; i < localStorage.length; i++) {var keyname = localStorage.key(i);var tode = localStorage.getItem(keyname);try {var site = JSON.parse(tode);result += "<tr>" +"<td>" + '<button>' + (i + 1) + '</button>' + "</td>" +"<td>" + site.keyname + "</td>" +"<td>" + site.sitename + "</td>" +"<td>" + site.siteurl + "</td>" +"<td> <input type='checkbox' name='checkbox'></td>" +"</tr>";} catch (e) {console.error("Error parsing JSON for key: " + keyname, e);}}result += "</table>";list.innerHTML = result;document.body.innerHTML = document.body.innerHTML.replace(/undefined/ig, "<span style='color: red; font-size: 10px;'>$&</span>");} else {list.innerHTML = "数据为空...";}// 重新绑定删除按钮事件var deleteBtn = document.getElementById("delete");deleteBtn.onclick = function () {if (confirm("是否删除所选?")) {var checkboxes = document.getElementsByName("checkbox");for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) {var keyname = checkboxes[i].parentNode.previousElementSibling.previousElementSibling.textContent;localStorage.removeItem(keyname);checkboxes[i].parentNode.parentNode.parentNode.removeChild(checkboxes[i].parentNode.parentNode);// i--;i = i - 1; // 恢复到之前的索引}}userAll();}};// 重新绑定删除按钮事件结束};</script>
</body>
</html

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

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

相关文章

ROS快速实现helloworld

ROS中涉及的编程语言以C和Python为主&#xff0c;ROS中的大多数程序两者都可以实现&#xff0c;在本系列教程中&#xff0c;每一个案例也都会分别使用C和Python两种方案演示&#xff0c;大家可以根据自身情况选择合适的实现方案。 ROS中的程序即便使用不同的编程语言&#xff…

leetcode51.N皇后(困难)-回溯法

思路 都知道n皇后问题是回溯算法解决的经典问题&#xff0c;但是用回溯解决多了组合、切割、子集、排列问题之后&#xff0c;遇到这种二维矩阵还会有点不知所措。 首先来看一下皇后们的约束条件&#xff1a; 不能同行不能同列不能同斜线 确定完约束条件&#xff0c;来看看究…

Uniapp好看登录注册页面

个人介绍 hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的…

Kafka(十二)Streams

目录 Streams1 什么式是流式处理2 流式处理的相关概念2.1 拓扑2.2 时间2.2.1 输入时间2.2.2 输出时间 2.3 状态2.4 流和表2.5 时间窗口2.5.1 测试时间窗口 2.6 处理保证 3 流式处理设计模式3.1 单事件处理3.2 使用本地状态3.3 多阶段处理和重分区3.4 使用外部查找&#xff1a;流…

日本宇宙航空研究“Int-Ball2”自由飞行相机机器人采用的Epson IMU

IMU有助于飞行的稳定控制和电池充电的自动对接- 精工爱普生公司&#xff08;TSE:6724&#xff0c;“Epson”&#xff09;很高兴地宣布&#xff0c;日本宇宙航空研究开发机构&#xff08;JAXA&#xff09;选择了爱普生M-G370系列的惯性测量单元&#xff08;IMU&#xff09;&…

附录6-4 黑马优购项目-分类和购物车

目录 1 分类 1.1 接口 1.2 窗口限制 1.3 选中状态样式判断 1.4 点击左侧时右侧会到顶点 1.5 源码 2 购物车 2.1 store 2.2 tabBar徽标 2.3 滑动删除 2.4 结算 2.4.1 结算前登录 2.4.2 结算功能 2.5 触发组件事件 2.6 源码 1 分类 分类最上部是…

JAVA面试专题-微服务篇

Spring cloud Spring Cloud 5大组件有哪些 注册中心/配置中心&#xff1a;nacos 负载均衡&#xff1a;Ribbon 服务远程调用&#xff1a;Feign 服务保护&#xff1a;sentinel 服务网关&#xff1a;Gateway 微服务注册和发现 nacos和eureka的区别 负载均衡 微服务向Ribbon发送…

unity制作app(3)--gps定位

1.unity中定位Unity之GPS定位&#xff08;高德解析&#xff09;_unity gps定位-CSDN博客 代码需要稍微修改一下&#xff0c;先把脚本绑到一个button上试一试&#xff01; 2.先去高德地图认证&#xff08;app定位&#xff09; 创建应用和 Key-Web服务 API | 高德地图API (ama…

Golang | Leetcode Golang题解之第64题最小路径和

题目&#xff1a; 题解&#xff1a; func minPathSum(grid [][]int) int {if len(grid) 0 || len(grid[0]) 0 {return 0}rows, columns : len(grid), len(grid[0])dp : make([][]int, rows)for i : 0; i < len(dp); i {dp[i] make([]int, columns)}dp[0][0] grid[0][0]…

场景文本检测识别学习 day06(Vi-Transformer论文精读、MAE论文阅读)

Vi-Transformer论文精读 在NLP领域&#xff0c;基于注意力的Transformer模型使用的非常广泛&#xff0c;但是在计算机视觉领域&#xff0c;注意力更多是和CNN一起使用&#xff0c;或者是单纯将CNN的卷积替换成注意力&#xff0c;但是整体的CNN 架构没有发生改变VIT说明&#x…

【知识学习/复习】损失函数篇,包含理解应用与分类:回归、分类、排序、生成等任务

损失函数总结 一、损失函数理解二、不同任务的损失函数的应用1.图像分类2.目标检测3.语义分割4.自然语言处理&#xff08;NLP&#xff09;5.图神经网络&#xff08;GNN&#xff09;6.生成式网络 三、损失函数1. 回归任务损失函数常见损失函数IoU系列损失函数1. IoU损失函数&…

计算机网络chapter2——应用层

文章目录 第2章 应用层章节引出—— 2.1应用层协议原理2.1.1 网络应用程序体系结构&#xff08;1&#xff09;客户-服务器体系结构&#xff08;2&#xff09;对等(P2P)体系结构2.1.2 进程通信1.客户和服务器进程2.进程与计算机网络之间的接口3. 进程寻址 2.1.3 可供应用程序使用…

【Cpp】类和对象

标题&#xff1a;【Cpp】类和对象 水墨不写bug 正文开始&#xff1a; &#xff08;一&#xff09;面向过程与面向对象 面向过程和面向对象是两种不同的编程思想。 面向过程指的是将程序分解成多个步骤&#xff0c;每个步骤都是一个独立的函数&#xff0c;通过函数之间的调用实…

# notepad++ 编辑器英文版,如何打开自动换行

notepad 编辑器英文版&#xff0c;如何打开自动换行 在Notepad中&#xff0c;如果你想要开启自动换行功能&#xff0c;可以按照以下步骤操作&#xff1a; 1、打开 Notepad 编辑器。 1.1. 依次点击菜单栏中的【视图】&#xff0c;英文版对应【View】。1.2. 在【视图】下拉菜单…

自动化机器学习流水线:基于Spring Boot与AI机器学习技术的融合探索

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

51单片机两个中断及中断嵌套

文章目录 前言一、中断嵌套是什么&#xff1f;二、两个同级别中断2.1 中断运行关系2.2 测试程序 三、两个不同级别中断实现中断嵌套3.1 中断运行关系3.2 测试程序 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 课程需要&#xff1a; 提示&#x…

结构分析的有限元法及matlab实现(徐荣桥)|【PDF教材+配套案例Matlab源码】

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

Luminar开始为沃尔沃生产下一代激光雷达传感器

在自动驾驶技术的浪潮中&#xff0c;激光雷达&#xff08;LiDAR&#xff09;传感器以其高精度和强大的环境感知能力&#xff0c;逐渐成为了该领域的技术之星。Luminar&#xff08;路安达&#xff09;公司作为自动驾驶技术的领军企业&#xff0c;近日宣布已开始为沃尔沃汽车生产…

OneFlow概念清单

ChatGPT OneFlow是一个开源的深度学习框架&#xff0c;它是由中国的一家公司——OneFlow Inc. 开发的&#xff0c;致力于提高大规模分布式训练的性能和效率。它提供了一种新颖的编程范式&#xff0c;旨在简化分布式系统的搭建过程&#xff0c;并提高资源的利用率。在OneFlow中…

Github Action Bot 开发教程

Github Action Bot 开发教程 在使用 Github 时&#xff0c;你可能在一些著名的开源项目&#xff0c;例如 Kubernetes&#xff0c;Istio 中看到如下的一些评论&#xff1a; /lgtm /retest /area bug /assign xxxx ...等等&#xff0c;诸如此类的一些功能性评论。在这些评论出现…