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

用户认证系统登录界面

news 2026/2/9 16:18:28

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

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

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/26 13:25:02