<div class="container"> <div class="form-box"> <!-- 注册 --> <div class="register-box hidden"> <h1>register</h1> <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <input type="password" placeholder="确认密码"> <button>注册</button> </div> <!-- 登录 --> <div class="login-box"> <h1>login</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button>登录</button> </div> </div> <div class="con-box left"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>已有账号</p> <button id="login">去登录</button> </div> <div class="con-box right"> <h1>欢迎来到<span>原神</span></h1> <p>你将在游戏中探索一个被称作「提瓦特」的<span>幻想世界。</span></p> <img src="images/paimeng_logo.jpg" alt=""> <p>没有账号?</p> <button id="register">去注册</button> </div> </div> 在此代码中用js设计登陆系统 不需要链接服务器
时间: 2023-07-19 11:42:00 浏览: 78
这段 HTML 代码包含了一个注册表单和一个登录表单,以及两个欢迎页面。为了在不链接服务器的情况下设计登录系统,我们可以使用 JavaScript 来模拟登录和注册过程,并在客户端存储用户信息。
以下是一个简单的 JavaScript 代码示例,用于处理登录和注册表单的提交,并将用户信息存储在本地存储中:
```javascript
// 获取注册和登录表单元素
const registerForm = document.querySelector('.register-box');
const loginForm = document.querySelector('.login-box');
// 获取注册表单中的输入元素
const registerUsernameInput = registerForm.querySelector('input[type="text"]');
const registerEmailInput = registerForm.querySelector('input[type="email"]');
const registerPasswordInput = registerForm.querySelector('input[type="password"]');
const registerConfirmPasswordInput = registerForm.querySelectorAll('input[type="password"]')[1];
// 获取登录表单中的输入元素
const loginUsernameInput = loginForm.querySelector('input[type="text"]');
const loginPasswordInput = loginForm.querySelector('input[type="password"]');
// 获取欢迎页面元素
const welcomePages = document.querySelectorAll('.con-box');
// 获取注册和登录按钮
const registerButton = registerForm.querySelector('button');
const loginButton = loginForm.querySelector('button');
// 设置本地存储中存储用户信息的键名
const userStorageKey = 'user';
// 注册表单提交事件处理程序
registerButton.addEventListener('click', function(event) {
event.preventDefault();
const username = registerUsernameInput.value;
const email = registerEmailInput.value;
const password = registerPasswordInput.value;
const confirmPassword = registerConfirmPasswordInput.value;
// 在此处进行表单验证,确保所有字段都已填写,并且密码和确认密码匹配
// 将用户信息存储在本地存储中
localStorage.setItem(userStorageKey, JSON.stringify({ username, email, password }));
// 切换到欢迎页面
welcomePages.forEach(page => page.classList.toggle('hidden'));
});
// 登录表单提交事件处理程序
loginButton.addEventListener('click', function(event) {
event.preventDefault();
const username = loginUsernameInput.value;
const password = loginPasswordInput.value;
// 从本地存储中获取用户信息
const user = JSON.parse(localStorage.getItem(userStorageKey));
// 在此处进行验证,确保用户名和密码匹配
if(user && user.username === username && user.password === password) {
// 切换到欢迎页面
welcomePages.forEach(page => page.classList.toggle('hidden'));
} else {
alert('用户名或密码错误');
}
});
```
需要注意的是,这只是一个简单的示例,没有进行表单验证和安全性检查。在实际应用中,您需要添加适当的验证和安全性措施,以确保用户信息的安全性。