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

用户认证系统登录界面

news 2026/2/8 7:09:49

下面是使用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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/30 0:09:51

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/2/2 18:52:32

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2026/2/7 16:38:17

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/2/5 14:35:21

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2026/2/5 0:01:03