好的，下面是一个简单的仿小米闪购的登录注册
页面代码示例，包含
利用Cookie保存用户信息的功能：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米闪购登录注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h1>登录</h1>
<a href="#" class="switch-btn">注册</a>
</div>
<div class="card-body">
<form id="login-form">
<label for="username">
用户名</label>
<input type="text" id="username" name="username" required>
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<div class="remember-me">
<input type="checkbox" id="rememberMe" name="rememberMe">
<label for="rememberMe">记住我</label>
</div>
<button type="submit">登录</button>
</form>
</div>
</div>
<div class="card hidden">
<div class="card-header">
<h1>注册</h1>
<a href="#" class="switch-btn">登录</a>
</div>
<div class="card-body">
<form id="register-form">
<label for="reg-username">
用户名</label>
<input type="text" id="reg-username" name="username" required>
<label for="reg-password">密码</label>
<input type="password" id="reg-password" name="password" required>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirmPassword" required>
<button type="submit">注册</button>
</form>
</div>
</div>
</div>
<script src="app.
js"></script>
</body>
</html>
```
CSS代码：
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
background-color: #fff;
box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
border-radius: 0.4rem;
padding: 2rem;
width: 28rem;
max-width: 90%;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.card-header h1 {
font-size: 2rem;
font-weight: bold;
color: #333;
}
.switch-btn {
font-size: 1.2rem;
color: #999;
text-decoration: none;
transition: color 0.2s;
}
.switch-btn:hover {
color: #333;
}
.hidden {
display: none;
}
.card-body label {
display: block;
margin-bottom: 0.5rem;
font-size: 1.2rem;
color: #333;
}
.card-body input[type="text"],
.card-body input[type="password"] {
display: block;
width: 100%;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 0.4rem;
margin-bottom: 1rem;
font-size: 1.2rem;
color: #333;
}
.card-body .remember-me {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.card-body .remember-me label {
font-size: 1.2rem;
color: #333;
margin-left: 0.5rem;
}
.card-body button[type="submit"] {
display: block;
width: 100%;
padding: 1rem;
background-color: #ff6700;
color: #fff;
border: none;
border-radius: 0.4rem;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.2s;
}
.card-body button[type="submit"]:hover {
background-color: #ff8000;
}
.error-msg {
color: #ff0033;
font-size: 1.2rem;
margin-top: 0.5rem;
}
```
JS代码：
```javascript
//
获取DOM元素
const loginCard = document.querySelector('.container .card:first-child');
const registerCard = document.querySelector('.container .card:last-child');
const switchBtns = document.querySelectorAll('.switch-btn');
const loginForm = document.querySelector('#login-form');
const registerForm = document.querySelector('#register-form');
const errorMsgs = document.querySelectorAll('.error-msg');
// 切换登录和注册卡片
switchBtns.forEach(btn => {
btn.addEventListener('click', () => {
loginCard.classList.toggle('hidden');
registerCard.classList.toggle('hidden');
});
});
// 处理登录表单提交事件
loginForm.addEventListener('submit', e => {
e.preventDefault();
const username = loginForm.username.value.trim();
const password = loginForm.password.value.trim();
const rememberMe = loginForm.rememberMe.checked;
//
模拟异步请求
setTimeout(() => {
if (username === 'admin' && password === '123456') {
// 登录成功
if (rememberMe) {
// 将
用户名和记住我状态
保存到
Cookie中
document.
cookie = `username=${username}; expires=${new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString()}; path=/`;
document.
cookie = `rememberMe=${rememberMe}; expires=${new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString()}; path=/`;
} else {
// 删除
Cookie中的
用户名和记住我状态
document.
cookie = `username=; expires=${new Date(0).toUTCString()}; path=/`;
document.
cookie = `rememberMe=; expires=${new Date(0).toUTCString()}; path=/`;
}
window.location.href = 'index.html'; // 跳转到主页
} else {
// 登录失败
errorMsgs[0].textContent = '
用户名或密码错误';
}
}, 1000);
});
// 处理注册表单提交事件
registerForm.addEventListener('submit', e => {
e.preventDefault();
const username = registerForm.username.value.trim();
const password = registerForm.password.value.trim();
const confirmPassword = registerForm.confirmPassword.value.trim();
if (password !== confirmPassword) {
errorMsgs[1].textContent = '两次输入的密码不一致';
return;
}
//
模拟异步请求
setTimeout(() => {
// 注册成功
window.location.href = 'login.html'; // 跳转到登录页
}, 1000);
});
```
在上述代码中，我们定义了两个表单（登录表单和注册表单），并使用JavaScript处理了它们的提交事件。在登录表单提交事件中，我们可以根据
用户输入的
用户名和密码进行验证，并根据
用户是否选择记住我选项来
保存或删除
Cookie中的
用户信息。在注册表单提交事件中，我们只是
模拟了异步请求，并在请求成功后将
页面重定向到登录页。
注意，在实际开发中，我们需要使用更加严格的安全措施来保护
用户的隐私
信息。例如，使用HTTPS协议来传输敏感
信息、对密码进行哈希处理等。
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
