当前位置： 首页 > news >正文

用户认证系统登录界面

news 2025/7/7 6:58:19

下面是使用HTML和JavaScript实现的一个中文版登录界面，包含登录、注册和修改密码功能。注册成功后会显示提示信息，在登录成功后进入一个大大的欢迎页面。

1.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户认证系统</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f4f4f9;}.container {width: 300px;padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 5px;text-align: center;}h2 {margin-bottom: 20px;}form {display: flex;flex-direction: column;}input[type="text"],input[type="password"] {margin-bottom: 10px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;width: 100%;}button {padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;width: 100%;}button:hover {background-color: #0056b3;}.message {margin-top: 10px;}.success {color: green;}.error {color: red;}#welcome-container {width: 400px;padding: 40px;background-color: #d4edda;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 10px;text-align: center;}#welcome-message {font-size: 24px;margin-bottom: 20px;}</style>
</head>
<body><div class="container" id="login-container"><h2>登录</h2><form id="login-form"><input type="text" id="login-username" placeholder="用户名" required><input type="password" id="login-password" placeholder="密码" required><button type="submit">登录</button></form><p class="message error" id="login-error"></p><p class="message"><a href="#" onclick="showRegisterForm(); return false;">注册新账号</a></p></div><div class="container" id="register-container" style="display: none;"><h2>注册</h2><form id="register-form"><input type="text" id="register-username" placeholder="用户名" required><input type="password" id="register-password" placeholder="密码" required><button type="submit">注册</button></form><p class="message success" id="register-success"></p><p class="message error" id="register-error"></p><p class="message"><a href="#" onclick="showLoginForm(); return false;">返回登录</a></p></div><div class="container" id="change-password-container" style="display: none;"><h2>修改密码</h2><form id="change-password-form"><input type="password" id="old-password" placeholder="旧密码" required><input type="password" id="new-password" placeholder="新密码" required><button type="submit">修改密码</button></form><p class="message error" id="change-password-error"></p><p class="message"><a href="#" onclick="showWelcomePage(); return false;">返回欢迎页面</a></p></div><div id="welcome-container" style="display: none;"><h2 id="welcome-message"></h2><button onclick="showChangePassword()">修改密码</button><button onclick="logout()">注销</button></div><script>let users = [];let currentUser = null;document.getElementById('login-form').addEventListener('submit', function(event) {event.preventDefault();const username = document.getElementById('login-username').value;const password = document.getElementById('login-password').value;const user = users.find(user => user.username === username && user.password === password);if (user) {currentUser = user;showWelcomePage();} else {document.getElementById('login-error').textContent = '无效的用户名或密码';}});document.getElementById('register-form').addEventListener('submit', function(event) {event.preventDefault();const username = document.getElementById('register-username').value;const password = document.getElementById('register-password').value;if (!users.find(user => user.username === username)) {users.push({ username, password });document.getElementById('register-success').textContent = '注册成功！';setTimeout(() => {document.getElementById('register-success').textContent = '';}, 3000);document.getElementById('register-username').value = '';document.getElementById('register-password').value = '';showLoginForm();} else {document.getElementById('register-error').textContent = '用户名已存在';}});document.getElementById('change-password-form').addEventListener('submit', function(event) {event.preventDefault();const oldPassword = document.getElementById('old-password').value;const newPassword = document.getElementById('new-password').value;if (currentUser && currentUser.password === oldPassword) {currentUser.password = newPassword;users = users.map(user => user.username === currentUser.username ? { ...user, password: newPassword } : user);document.getElementById('change-password-error').textContent = '密码修改成功';setTimeout(() => {document.getElementById('change-password-error').textContent = '';}, 3000);hideChangePassword();} else {document.getElementById('change-password-error').textContent = '旧密码不正确';}});function showWelcomePage() {document.getElementById('login-container').style.display = 'none';document.getElementById('register-container').style.display = 'none';document.getElementById('change-password-container').style.display = 'none';document.getElementById('welcome-container').style.display = 'block';document.getElementById('welcome-message').textContent = `欢迎, ${currentUser.username}`;}function logout() {currentUser = null;document.getElementById('welcome-container').style.display = 'none';document.getElementById('login-container').style.display = 'block';}function showRegisterForm() {document.getElementById('login-container').style.display = 'none';document.getElementById('register-container').style.display = 'block';document.getElementById('login-error').textContent = ''; // Clear login error message}function showLoginForm() {document.getElementById('register-container').style.display = 'none';document.getElementById('login-container').style.display = 'block';document.getElementById('register-success').textContent = ''; // Clear registration success messagedocument.getElementById('register-error').textContent = ''; // Clear registration error message}function showChangePassword() {document.getElementById('welcome-container').style.display = 'none';document.getElementById('change-password-container').style.display = 'block';}function hideChangePassword() {document.getElementById('change-password-container').style.display = 'none';document.getElementById('welcome-container').style.display = 'block';}</script>
</body>
</html>

2.功能说明：

这个应用程序使用纯HTML和JavaScript实现。

  • 包含登录、注册和修改密码功能。
  • 注册成功后会显示一条绿色的成功消息，并在3秒后自动消失。
  • 登录成功后，用户会被带到一个大大的欢迎页面。
  • 用户可以点击“注销”按钮退出登录。
  • 提供了从登录页面跳转到注册页面和从注册页面返回登录页面的链接。
  • 欢迎页面中有一个“修改密码”的按钮，可以跳转到修改密码页面。

3.效果图

在这里插入图片描述

相关文章：

用户认证系统登录界面

下面是使用HTML和JavaScript实现的一个中文版登录界面&#xff0c;包含登录、注册和修改密码功能。注册成功后会显示提示信息&#xff0c;在登录成功后进入一个大大的欢迎页面。 1.代码展示 <!DOCTYPE html> <html lang"zh-CN"> <head><meta …...

编程日记 2024/12/12 6:15:09

Redis从入门到进阶（总结）

以下内容均以CentOS7为背景。 一、Redis安装及启动 mysql&#xff08;读&#xff1a;2000/s&#xff1b;写&#xff1a;600/s&#xff09; redis&#xff08;读&#xff1a;10w/s&#xff1b;写&#xff1a;8w/s&#xff09;通过官方给出的数据单机并发可以达到10w/s&#xf…...

编程日记 2024/12/12 6:13:06

【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建（四）：数据标签的添加

当前内容所在位置&#xff1a; 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段&#xff08;一&#xff09;5.1.2 饼图布局生成器&#xff08;二&#xff09;5.1.3 圆弧的绘制&#xff08;三&#xff09; ✔️5.1.4 数据标签的添加&#xff08;四&…...

编程日记 2024/12/12 6:12:05

Linux的基本功能和命令

Linux的基本功能和命令 切换目录 pwd 查询当前目录地址 cd /xxx/xxx 转到目录 cd …/ 回到上一级目录 cd ./ 当前目录 创建、删除文件/文件夹 创建文件\文件夹 touch filename 创建空文件mkdir 创建目录 mkdir -p 目标目录存在也不报错mkdir -p xxx/xxx 递归创建目录…...

编程日记 2024/12/12 6:11:01

【Spark】Spark的两种核心Shuffle工作原理详解

Spark 的shuffle机制 一、Spark ShuffleManager 发展历程 Spark 1.1.0 之前 在 Spark 1.1.0 之前&#xff0c;Spark 使用 BlockStoreShuffleFetcher 来处理 Shuffle 操作。这个实现主要依赖于直接从 BlockManager 获取 Shuffle 数据&#xff0c;并通过网络进行交换。 Spark …...

编程日记 2024/12/12 6:07:58

TCP 的文化内涵

从历史和文化内涵的视角看 TCP 协议的优势和局限&#xff0c;这些都刻在基因里。节约和经济获得向下兼容&#xff0c;但这也意味着它没有浪费带宽的本意&#xff0c;任何相左的优化策略终将遇到无法解决的困难&#xff0c;大致就这样&#xff0c;这为设计新协议提了意见&#x…...

编程日记 2024/12/12 6:04:55

ASP.NET ｜日常开发中读写XML详解

ASP.NET &#xff5c;日常开发中读写XML详解 前言一、XML 概述1.1 定义和结构1.2 应用场景 二、读取 XML 文件2.1 使用XmlDocument类&#xff08;DOM 方式&#xff09;2.2 使用XmlReader类&#xff08;流方式&#xff09; 三、写入 XML 文件3.1 使用XmlDocument类3.2 使用XmlWr…...

编程日记 2024/12/12 6:03:54

Less和SCSS，哪个更好用？

前言 Less 和 SCSS 都是流行的 CSS 预处理器&#xff0c;它们的目的都是扩展 CSS 的功能&#xff0c;使样式表更具组织性、可维护性和可重用性。虽然它们有许多相似之处&#xff0c;但在语法、特性和工作方式上也存在一些差异。 Less Less 是一种动态样式表语言&#xff0c;…...

编程日记 2024/12/12 6:02:53

第一个C++程序--(蓝桥杯备考版）

第一个C程序 基础程序 #include <iostream>//头⽂件 using namespace std;//使⽤std的名字空间 int main()//main函数 {cout << "hello world!" << endl; //输出&#xff1a;在屏幕打印"hello world!" return 0;}main函数 main 函数是…...

编程日记 2024/12/12 5:59:51

NanoLog起步笔记-7-log解压过程初探

nonolog起步笔记-6-log解压过程初探 再看解压过程建立调试工程修改makefile添加新的launch项 注&#xff1a;重新学习nanolog的README.mdPost-Execution Log Decompressor 下面我们尝试了解&#xff0c;解压的过程&#xff0c;是如何得到文件头部的meta信息的。 再看解压过程 …...

编程日记 2024/12/12 5:58:50

【MySQL 进阶之路】基础语法及优化技巧

MySQL DML 基础语法及优化技巧 一、DML&#xff08;数据操作语言&#xff09;概述 DML 是数据库操作语言的子集&#xff0c;用于数据的增、删、改、查四个基本操作。MySQL 中的 DML 操作通常是指以下四种基本操作&#xff1a; INSERT&#xff1a;插入数据SELECT&#xff1a;…...

编程日记 2024/12/12 5:57:49

微信小程序做电子签名功能

文章目录 最近需求要做就记录一下。 人狠话不多&#xff0c;直接上功能&#xff1a; 直接搂代码吧,复制过去就可以用&#xff0c;有其他需求自己改吧改吧。 signature.wxml <!-- 电子签名页面 --> <custom-navbar title"电子签名"show-home"{{fals…...

编程日记 2024/12/12 5:55:48

PR的选择与移动

选择工具 可以选择序列上的剪辑&#xff0c;如果需要多选可以按住shift键选中多个剪辑 CtrlA&#xff1a;可以进行全选 编组 选中多个剪辑后“右键-编组“可以将所选的剪辑连接在一起。这时单击任意剪辑都可以选中全部 向前选择轨道工具与向后选择轨道工具 向前选择轨道工具…...

编程日记 2024/12/12 5:53:46

Linux系统 —— 进程系列 - 进程状态 ：僵尸与孤儿

目录 1. 进程状态的概念 1.1 课本上的说法&#xff1a;名词提炼 1.2 运行&#xff0c;阻塞和挂起 1.2.1 什么叫做运行状态&#xff08;running&#xff09;&#xff1f; 1.2.2 什么叫做阻塞状态&#xff08;sleeping&#xff09;&#xff1f; 1.2.3 什么叫做挂起状态&…...

编程日记 2024/12/12 5:52:45

linux/centOS7用户和权限管理笔记

linux系列中可以&#xff1a; 配置多个用户配置多个用户组用户可以加入多个用户中 linux中关于权限的管理级别有2个级别&#xff0c;分别是&#xff1a; 针对用户的权限控制针对用户组的权限控制 一&#xff0c;root用户 root用户拥有最大的系统操作权限&#xff0c;而普通…...

编程日记 2024/12/12 5:50:43

使用C#基于ADO.NET编写MySQL的程序

MySQL 是一个领先的开源数据库管理系统。它是一个多用户、多线程的数据库管理系统。MySQL 在网络上特别流行。MySQL 数据库可在大多数重要的操作系统平台上使用。它可在 BSD Unix、Linux、Windows 或 Mac OS 上运行。MySQL 有两个版本&#xff1a;MySQL 服务器系统和 MySQL 嵌入…...

编程日记 2024/12/12 5:49:39

Scala函数的泛型

package hfd //泛型 //需求&#xff1a;你是一个程序员&#xff0c;老板让你写一个函数&#xff0c;用来获取列表中的中间元素 //List(1,2,3,4,5)>中间元素的下标长度/2 >3 //getMiddleEle object Test38_5 {def print1():Unit{println(1)}def print2(): Unit {println(…...

编程日记 2024/12/12 5:48:36

云轴科技ZStack亮相中国生成式AI大会上海站 展现AI Infra新势力

近日&#xff0c;以“智能跃进&#xff0c;创造无限”为主题的2024中国生成式AI大会在上海举办。本次大会由上海市人工智能行业协会指导&#xff0c;智东西、智猩猩共同发起&#xff0c;邀请了人工智能行业的顶尖嘉宾汇聚一堂&#xff0c;以前瞻性视角解构和把脉生成式AI的技术…...

编程日记 2024/12/12 5:47:35

态感知与势感知

“态感知”和“势感知”是两个人机交互中较为深奥的概念&#xff0c;它们虽然都与感知、认知相关&#xff0c;但侧重点不同。下面将从这两个概念的定义、区分以及应用领域进行解释&#xff1a; 1. 态感知 态感知通常指的是对事物当前状态、属性或者内在特征的感知。它强调的是在…...

编程日记 2024/12/12 5:46:34

汽车零部件设计之——发动机曲轴预应力模态分析仿真APP

汽车零部件是汽车工业的基石&#xff0c;是构成车辆的基础元素。一辆汽车通常由上万件零部件组成&#xff0c;包括发动机系统、传动系统、制动系统、电子控制系统等&#xff0c;它们共同确保了汽车的安全、可靠性及高效运行。在汽车产业快速发展的今天&#xff0c;汽车零部件需…...

编程日记 2024/12/12 5:45:33

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/7/5 9:34:51

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/7/4 15:17:28

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/6 0:26:56

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/6/21 2:36:09

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

编程新知 2025/7/5 11:46:22

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2025/7/5 17:32:04

SQL进阶之旅 Day 22：批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

编程新知 2025/7/6 18:42:35

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

编程新知 2025/6/21 5:44:58