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

用户认证系统登录界面

news 2026/2/9 0:50:46

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

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/24 14:23:08

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2026/2/7 11:25:15

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11