HTML+CSS+JS用户管理(可储存用户数据)

使用cookies记录账号密码信息,可以注册、登录、注销账号。 点赞❤️收藏⭐️关注😍 

效果图   源代码在效果图后面 

5147fc58d7ba49e7b1b9a7cf1e4c4d34.jpg

源代码

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>注册登录系统</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="container">

        <div id="form-container">

            <h2 id="form-title">登录</h2>

            <input type="text" id="username" placeholder="账号" required>

            <input type="password" id="password" placeholder="密码" required>

            <select id="type">

                <option value="student">学生</option>

                <option value="teacher">老师</option>

            </select>

            <button id="toggle-btn">切换到注册</button>

            <button id="submit-btn">登录</button>

            <button id="logout-toggle-btn">切换到注销</button>

        </div>

    </div>

    <script src="script.js"></script>

</body>

</html>

JavaScript    script.js

 

document.addEventListener('DOMContentLoaded', () => {

    const formTitle = document.getElementById('form-title');

    const usernameInput = document.getElementById('username');

    const passwordInput = document.getElementById('password');

    const typeSelect = document.getElementById('type');

    const toggleBtn = document.getElementById('toggle-btn');

    const submitBtn = document.getElementById('submit-btn');

    const logoutToggleBtn = document.getElementById('logout-toggle-btn');

 

    let mode = 'login'; // 可为 'login', 'register', 'logout'

 

    toggleBtn.addEventListener('click', () => {

        if (mode === 'login') {

            mode = 'register';

            updateForm();

        } else if (mode === 'register') {

            mode = 'login';

            updateForm();

        }

    });

 

    logoutToggleBtn.addEventListener('click', () => {

        mode = 'logout';

        updateForm();

    });

 

    submitBtn.addEventListener('click', () => {

        const username = usernameInput.value.trim();

        const password = passwordInput.value.trim();

        const type = typeSelect.value;

 

        if (username === '' || (mode !== 'logout' && password === '')) {

            alert('请填写所有字段');

            return;

        }

 

        if (mode === 'login') {

            login(username, password);

        } else if (mode === 'register') {

            register(username, password, type);

        } else if (mode === 'logout') {

            logout(username);

        }

    });

 

    function updateForm() {

        if (mode === 'login') {

            formTitle.textContent = '登录';

            submitBtn.textContent = '登录';

            toggleBtn.textContent = '切换到注册';

            logoutToggleBtn.textContent = '切换到注销';

            typeSelect.style.display = 'none';

            passwordInput.style.display = 'block';

        } else if (mode === 'register') {

            formTitle.textContent = '注册';

            submitBtn.textContent = '注册';

            toggleBtn.textContent = '切换到登录';

            logoutToggleBtn.textContent = '切换到注销';

            typeSelect.style.display = 'block';

            passwordInput.style.display = 'block';

        } else if (mode === 'logout') {

            formTitle.textContent = '注销';

            submitBtn.textContent = '注销';

            toggleBtn.textContent = '切换到登录';

            logoutToggleBtn.textContent = '切换到登录';

            typeSelect.style.display = 'none';

            passwordInput.style.display = 'none';

        }

    }

 

    function getCookie(name) {

        const value = `; ${document.cookie}`;

        const parts = value.split(`; ${name}=`);

        if (parts.length === 2) return parts.pop().split(';').shift();

    }

 

    function setCookie(name, value, days) {

        let expires = '';

        if (days) {

            const date = new Date();

            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

            expires = `; expires=${date.toUTCString()}`;

        }

        document.cookie = `${name}=${value || ''}${expires}; path=/`;

    }

 

    function deleteCookie(name) {

        document.cookie = `${name}=; Max-Age=-99999999;`;

    }

 

    function register(username, password, type) {

        if (getCookie(username)) {

            alert('该账号已被注册');

            return;

        }

        const userData = JSON.stringify({ username, password, type });

        setCookie(username, userData, 7);

        alert('注册成功!请登录。');

        toggleBtn.click(); // 自动切换到登录

    }

 

    function login(username, password) {

        const userData = getCookie(username);

        if (!userData) {

            alert('账号不存在');

            return;

        }

 

        const user = JSON.parse(userData);

        if (user.password === password) {

            window.location.href = `ruso.html?username=${username}`;

        } else {

            alert('密码错误');

        }

    }

 

    function logout(username) {

        const userData = getCookie(username);

        if (!userData) {

            alert('账号不存在');

            return;

        }

 

        deleteCookie(username);

        alert('账号已注销');

        toggleBtn.click(); // 自动切换到登录

    }

});

CSS styles.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2;
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

#form-title {
    margin-bottom: 20px;
    color: #e74c3c;
}

input, select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#toggle-btn, #logout-toggle-btn {
    background-color: #3498db;
    color: white;
}

#submit-btn {
    background-color: #e74c3c;
    color: white;
}

button:hover {
    opacity: 0.9;
}
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无人机图像目标检测

本仓库是人工智能课程的课程作业仓库&#xff0c;主要是完成无人机图像目标检测的任务&#xff0c;我们对visdrone数据集进行了处理&#xff0c;在yolo和ssd两种框架下进行了训练和测试&#xff0c;并编写demo用于实时的无人机图像目标检测。 requirements依赖&#xff1a; ss…

OpenGL笔记一之基础窗体搭建以及事件响应

OpenGL笔记一之基础窗体搭建以及事件响应 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记一之基础窗体搭建以及事件响应1.运行2.目录结构3.main.cpp4.CMakeList.txt 1.运行 2.目录结构 01_GLFW_WINDOW/ ├── CMakeLists.txt ├── glad.c ├── ma…

效能工具:执行 npm start 可直接切换proxy代理UR后直接启动项目

1) 背景: 我们项目是2个前端3个后端的配置。前端和每个后端都有需要调试的接口。 因此经常切换vite.congig.js中的proxy后端代理链接&#xff0c;是挺麻烦的。 于是我研究如何能快速切换后端URL&#xff0c;所幸懒人有懒福&#xff0c;我找到了Inquirer 和 fs&#xff0c; 实…

MySQL NaviCat 安装及配置教程(Windows)【安装】

文章目录 一、 MySQL 下载1. 官网下载2. 其它渠道 二、 MySQL 安装三、 MySQL 验证及配置四、 NaviCat 下载1. 官网下载2. 其它渠道 五、 NaviCat 安装六、 NaviCat 激活 软件 / 环境安装及配置目录 一、 MySQL 下载 1. 官网下载 安装地址&#xff1a;https://www.mysql.com/…

人员定位管理系统有怎样优势?这4点不可忽视

众所周知&#xff0c;人员定位管理系统是通过物联网和云计算等技术&#xff0c;记录所有员工的基本信息&#xff0c;将员工位置、工作情况、运动轨迹等信息上传给系统&#xff0c;全面记录和直观的展现厂区内所有工作人员的具体情况。 除了能够查看人员位置情况外&#xff0c;人…

【C++题解】1168. 歌唱比赛评分

问题&#xff1a;1168. 歌唱比赛评分 类型&#xff1a;数组找数 题目描述&#xff1a; 四&#xff08;1&#xff09; 班要举行一次歌唱比赛&#xff0c;以选拔更好的苗子参加校的歌唱比赛。评分办法如下&#xff1a;设 N 个评委&#xff0c;打 N 个分数&#xff08; 0≤每个分…

分手后失眠之夜:如何安放那颗无处安放的心

在人生的旅途中&#xff0c;我们总会遇到一些人&#xff0c;他们像流星般划过天际&#xff0c;给我们带来瞬间的绚烂&#xff0c;却也留下了长久的寂寥。当感情走到尽头&#xff0c;分手成为无法回避的现实&#xff0c;你是否也曾躺在床上&#xff0c;辗转反侧&#xff0c;难以…

实战篇(九):解锁3D魔方的秘密:用Processing编程实现交互式魔方

解锁3D魔方的秘密:用Processing编程实现交互式魔方 使用 Processing 创建一个 3D 魔方效果展示1. 安装 Processing2. 项目结构3. 代码实现4. 代码解释4.1. 初始化魔方4.2. 绘制魔方4.3. 处理鼠标事件4.4. 检查点击的面4.5. 旋转面和最终确定旋转5. 运行和测试6. 细节解释6.1. …

等级保护测评(三级)主机linux测评指导书

等级保护测评指导书分技术&#xff08;物理安全、主机安全、网络安全、应用安全、数据安全&#xff09; 和管理&#xff08;安全管理制度、安全管理机构、人员安全管理、系统建设管理、系统运维管理&#xff09;两大块。 今天给大家分享一下&#xff0c;等级保护测评&#xff0…

Python数据可视化库之bashplotlib使用详解

概要 在数据分析和科学计算领域,数据可视化是一个不可或缺的环节。传统的图形化数据可视化工具如 Matplotlib、Seaborn 等,虽然功能强大,但有时在命令行环境下使用并不方便。Bashplotlib 是一个轻量级的 Python 库,旨在简化命令行环境下的数据可视化操作。它允许用户在命令…

TS 入门(三):Typescript函数与对象类型

目录 前言回顾1. 函数类型a. 基本函数类型b. 可选参数和默认参数c. 剩余参数 2. 对象类型a. 基本对象类型b. 可选属性和只读属性 3. 类型别名和接口a. 类型别名b. 接口扩展 4. 类型推断和上下文类型a. 类型推断b. 上下文类型 扩展知识点&#xff1a;函数重载结语 前言 在前两章…

Floyd算法——AcWing 343. 排序

目录 Floyd算法 定义 运用情况 注意事项 解题思路 基本步骤 AcWing 343. 排序 题目描述 运行代码 代码思路 改进思路 Floyd算法 定义 Floyd算法&#xff0c;全称Floyd-Warshall算法&#xff0c;是一种用于解决图中所有顶点对之间的最短路径问题的动态规划算法。…

【Memcached】Memcached的工作原理

目录 ​编辑 第2章&#xff1a;Memcached工作原理 2.1 数据存储与访问 2.2 分布式架构 2.3 数据过期机制 第2章&#xff1a;Memcached工作原理 2.1 数据存储与访问 Memcached是一种键值存储系统&#xff0c;其中数据以键值对的形式存储。键是用于定位数据的唯一标识符&am…

13 IP层协议-网际控制报文协议ICMP

计算机网络资料下载&#xff1a;CSDNhttps://mp.csdn.net/mp_blog/creation/editor/140148186 为了更有效的转发IP数据报和提高交付成果的机会&#xff0c;在网际层使用了网际控制报文协议ICMP。ICMP允许主机或路由器报告差错情况和提供有关异常情况的报告。ICMP不是高层协议数…

【系统架构设计师】十一、系统架构设计(层次架构风格|MVC|面向服务的架构风格|ESB)

目录 五、层次架构风格 5.1 两层C/S架构 5.2 三层C/S架构 5.3 三层B/S架构 5.4 MVC架构 5.5 MVP架构 5.6 MVVM架构 六、面向服务的架构风格 6.1 SOA特征 6.2 Web Service 6.2.1 关键技术 6.2.2 WEB Service 6.3 企业服务总线ESB 相关推荐 历年真题练习 五、层次…

[Linux]添加sudoers

之前我们讲过sudo这个命令,它可以让我们普通用户进行短暂的提权,上回我们讲完了vim 本篇是个短篇,目的就是让我们之后的学习中可以使用sudo命令。 首先我们先登录root用户 ls /etc/sudoer 我们需要改的就是上面的这个文件 vim /etc/sudoers 我们用vim打开 把光标移动到这…

类和对象(中)-- 类的六个默认成员函数

目录 1.构造函数 1.1构造函数的特性 1.2 默认构造函数 1.3补丁 ​2.析构函数 2.1析构函数的特性 2.2构造函数与析构函数的调用顺序 3.拷贝构造函数&#xff08;复制构造函数&#xff09; 3.1拷贝构造函数的特征 4.赋值运算符重载 4.1运算符重载 4.2类内重载运算符 …

ChatGPT 深度解析:技术驱动的智能对话

在当今科技飞速发展的时代&#xff0c;ChatGPT 无疑成为了最耀眼的明星之一。它以其令人惊叹的智能对话能力&#xff0c;引发了全球范围内的广泛关注和热议。 ChatGPT 背后的技术堪称精妙绝伦。它基于深度学习算法&#xff0c;通过对海量数据的学习和分析&#xff0c;从而能够理…

浅谈Git

一&#xff1a;什么是 git git一种开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 下图是 git 的一个工作流程简图 二&#xff1a;什么是 分布/集中式版本控制系统 软件开发过程中&#xff0c;要解决多人协作的问题&#xff0c;需要…

【Linux】常见指令(下)

【Linux】常见指令&#xff08;下&#xff09; 通配符 *man指令cp指令echo指令cat指令&#xff08;简单介绍&#xff09;cp指令 mv指令alias指令which ctrl ccat指令linux下一切皆文件 more指令less指令head指令tail指令管道 通配符 ‘*’ 通配符’ *‘&#xff0c;是可以匹配…