<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>安全登录系统</title>
<style>
:root {
/* 合并后的统一变量 */
--white: #e9e9e9;
--gray: #333;
--blue: #0367a6;
--lightblue: #008997;
--button-radius: 0
.7rem;
--max-width: 758px;
--max-height: 420px;
font-size:
16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
align-items: center;
background: url
("https://res
.cloudinary
.com/dbhnlktrv/image/upload/v
1599997626/background_oeuhe7
.jpg"
);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height:
100vh;
place-items: center;
margin: 0;
}
.form__title {
font-weight: 300;
margin: 0;
margin-bottom:
1.25rem;
}
.link {
color: var
(--gray
);
font-size: 0
.9rem;
margin:
1.5rem 0;
text-decoration: none;
}
.container {
background-color: var
(--white
);
border-radius: var
(--button-radius
);
box-shadow: 0 0
.9rem
1.7rem rgba
(0, 0, 0, 0
.25
),
0 0
.7rem 0
.7rem rgba
(0, 0, 0, 0
.22
);
height: var
(--max-height
);
max-width: var
(--max-width
);
overflow: hidden;
position: relative;
width:
100%;
}
.container__
form {
height:
100%;
position: absolute;
top: 0;
transition: all 0
.6s ease-in-out;
}
.container--signin {
left: 0;
width: 50%;
z-index: 2;
}
.container
.right-panel-active
.container--signin {
trans
form: translateX
(100%
);
}
.container--signup {
left: 0;
opacity: 0;
width: 50%;
z-index:
1;
}
.container
.right-panel-active
.container--signup {
animation: show 0
.6s;
opacity:
1;
trans
form: translateX
(100%
);
z-index: 5;
}
.container__overlay {
height:
100%;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transition: trans
form 0
.6s ease-in-out;
width: 50%;
z-index:
100;
}
.container
.right-panel-active
.container__overlay {
trans
form: translateX
(-
100%
);
}
.overlay {
background: url
("https://cdn
.pixabay
.com/photo/20
18/08/
14/
13/23/ocean-3605547_
1280
.jpg"
);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:
100%;
left: -
100%;
position: relative;
trans
form: translateX
(0
);
transition: trans
form 0
.6s ease-in-out;
width: 200%;
}
.container
.right-panel-active
.overlay {
trans
form: translateX
(50%
);
}
.overlay__panel {
align-items: center;
display: flex;
flex-direction: column;
height:
100%;
justify-content: center;
position: absolute;
text-align: center;
top: 0;
trans
form: translateX
(0
);
transition: trans
form 0
.6s ease-in-out;
width: 50%;
}
.overlay--left {
trans
form: translateX
(-20%
);
}
.container
.right-panel-active
.overlay--left {
trans
form: translateX
(0
);
}
.overlay--right {
right: 0;
trans
form: translateX
(0
);
}
.container
.right-panel-active
.overlay--right {
trans
form: translateX
(20%
);
}
.btn {
background-color: var
(--blue
);
background-image: linear-gradient
(90deg, var
(--blue
) 0%, var
(--lightblue
) 74%
);
border-radius: 20px;
border:
1px solid var
(--blue
);
color: var
(--white
);
cursor: pointer;
font-size: 0
.8rem;
font-weight: bold;
letter-spacing: 0
.1rem;
padding: 0
.9rem 4rem;
text-trans
form: uppercase;
transition: trans
form 80ms ease-in;
}
.form >
.btn {
margin-top:
1.5rem;
}
.btn:active {
trans
form: scale
(0
.95
);
}
.btn:
focus {
outline: none;
}
.form {
background-color: var
(--white
);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
height:
100%;
text-align: center;
}
.input {
background-color: #fff;
border: none;
padding: 0
.9rem 0
.9rem;
margin: 0
.5rem 0;
width:
100%;
box-sizing: border-box;
}
@keyframes show {
0%, 49
.99% {
opacity: 0;
z-index:
1;
}
50%,
100% {
opacity:
1;
z-index: 5;
}
}
/* 新增功能样式 */
.loader {
border: 4px solid rgba
(0, 0, 0, 0
.1);
border-top: 4px solid #0367a6;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin
1s linear infinite;
display: none;
margin:
10px auto;
}
@keyframes spin {
0% {
trans
form: rotate
(0deg
);
}
100% {
trans
form: rotate
(360deg
);
}
}
.error-message {
color: #ff3860;
font-size: 0
.85rem;
margin-top: 0
.5rem;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
.password-container {
position: relative;
width:
100%;
}
.toggle-password {
position: absolute;
right:
10px;
top: 50%;
trans
form: translateY
(-50%
);
background: none;
border: none;
color: var
(--gray
);
cursor: pointer;
font-size: 0
.8rem;
}
.success-message {
color: #23d
160;
font-size: 0
.85rem;
margin-top: 0
.5rem;
display: none;
}
</style>
</head>
<body>
<!-- 登录页面容器 -->
<div id="loginPage" class="container right-panel-active">
<!-- 注册表单 -->
<div class="container__
form container--signup">
<
form class="
form" id="signup
Form">
<h2 class="
form__title">注册账号</h2>
<input type="text" placeholder="用户名" class="input" required id="signup
Username"/>
<input type="email" placeholder="邮箱" class="input" required id="signupEmail"/>
<div class="password-container">
<input type="password" placeholder="密码" class="input" required id="signupPassword"/>
<button type="button" class="toggle-password">👁️</button>
</div>
<div class="error-message" id="signupError"></div>
<div class="success-message" id="signupSuccess"></div>
<button class="btn" type="submit">注册</button>
</
form>
</div>
<!-- 登录表单 -->
<div class="container__
form container--signin">
<
form class="
form" id="login
Form">
<h2 class="
form__title">用户登录</h2>
<input type="email" placeholder="邮箱" class="input" required id="loginEmail"/>
<div class="password-container">
<input type="password" placeholder="密码" class="input" required id="loginPassword"/>
<button type="button" class="toggle-password">👁️</button>
</div>
<div class="loader" id="loginLoader"></div>
<div class="error-message" id="loginError"></div>
<button class="btn" type="submit">登录</button>
</
form>
</div>
<!-- 覆盖层 -->
<div class="container__overlay">
<div class="overlay">
<div class="overlay__panel overlay--left">
<button class="btn" id="signInBtn">去登录</button>
</div>
<div class="overlay__panel overlay--right">
<button class="btn" id="signUpBtn">去注册</button>
</div>
</div>
</div>
</div>
<!-- 仪表盘页面
(登录成功后显示
) -->
<div id="dashboardPage" class="hidden">
<div class="container" style="background-color: #ffffff; padding:
15rem; max-width:
1000px;">
<h2>欢迎, <span id="userDisplayName"></span>!</h2>
<p>您已成功登录！这是您的个人控制面板。</p>
<!-- 文本输入区域 -->
<div style="margin-top: 2rem;">
<h3>内容编辑区</h3>
<textarea id="userContent" rows="6"
style="width:
100%; padding:
10px; font-family: inherit; font-size:
1rem;"></textarea>
<button id="saveContentBtn" class="btn" style="margin-top:
1rem; padding: 0
.7rem 2rem;">保存内容</button>
<div class="success-message" id="saveSuccess" style="text-align: left; margin-top: 0
.5rem;"></div>
</div>
<div style="margin-top: 2rem;">
<p>电子邮箱: <span id="userEmailDisplay"></span></p>
<p>注册时间: <span id="registrationDate"></span></p>
<button id="logoutBtn" class="btn" style="margin-top: 2rem;">退出登录</button>
</div>
</div>
</div>
<script>
// ======== 页面元素 ========
const signInBtn =
document.getElementById("signInBtn"
);
const signUpBtn =
document.getElementById("signUpBtn"
);
const container =
document.querySelector
("
.container"
);
const login
Form =
document.getElementById("login
Form"
);
const signup
Form =
document.getElementById("signup
Form"
);
const loginLoader =
document.getElementById("loginLoader"
);
const loginError =
document.getElementById("loginError"
);
const signupError =
document.getElementById("signupError"
);
const signupSuccess =
document.getElementById("signupSuccess"
);
const loginPage =
document.getElementById("loginPage"
);
const dashboardPage =
document.getElementById("dashboardPage"
);
const logoutBtn =
document.getElementById("logoutBtn"
);
const userDisplayName =
document.getElementById("userDisplayName"
);
const userEmailDisplay =
document.getElementById("userEmailDisplay"
);
const registrationDate =
document.getElementById("registrationDate"
);
const togglePasswordBtns =
document.querySelectorAll
("
.toggle-password"
);
// ======== 密码可见性切换 ========
togglePasswordBtns
.forEach
(btn => {
btn
.addEventListener
("click", function
() {
const input = this
.previousElementSibling;
const type = input
.getAttribute
("type"
) === "password" ? "text" : "password";
input
.setAttribute
("type", type
);
this
.textContent = type === "password" ? "👁️" : "🔒";
}
);
}
);
// ======== 面板切换功能 ========
signInBtn
.addEventListener
("click",
() => {
container
.classList
.remove
("right-panel-active"
);
clearMessages
();
}
);
signUpBtn
.addEventListener
("click",
() => {
container
.classList
.add
("right-panel-active"
);
clearMessages
();
}
);
// ======== 注册功能 ========
signup
Form.addEventListener
("submit", function
(e
) {
e
.preventDefault
();
const
username =
document.getElementById("signup
Username"
).value
.trim
();
const email =
document.getElementById("signupEmail"
).value
.trim
();
const password =
document.getElementById("signupPassword"
).value;
// 验证用户名（至少3个字符）
if
(username.length < 3
) {
showSignupError
("用户名至少需要3个字符"
);
return;
}
// 验证邮箱格式
const emailRegex = /^[^\s@]+@[^\s@]+\
.[^\s@]+$/;
if
(!emailRegex
.test
(email
)) {
showSignupError
("请输入有效的电子邮箱"
);
return;
}
// 验证密码强度（至少6个字符）
if
(password
.length < 6
) {
showSignupError
("密码长度至少为6个字符"
);
return;
}
// 检查用户是否已注册（伪代码）
if
(localStorage
.getItem
(email
)) {
showSignupError
("该邮箱已注册"
);
return;
}
// 保存注册信息
const userData = {
username,
email,
password, // 实际应用中应存储哈希值而非明文
registrationDate: new Date
().toLocaleDateString
()
};
localStorage
.setItem
(email,
JSON
.stringify
(userData
));
// 注册成功
signupSuccess
.textContent = "注册成功！";
signupSuccess
.style
.display = "block";
signupError
.style
.display = "none";
// 3秒后切换到登录面板
setTimeout
(() => {
container
.classList
.remove
("right-panel-active"
);
signup
Form.reset
();
signupSuccess
.style
.display = "none";
}, 3000
);
}
);
// ======== 登录功能 ========
login
Form.addEventListener
("submit", function
(e
) {
e
.preventDefault
();
const email =
document.getElementById("loginEmail"
).value;
const password =
document.getElementById("loginPassword"
).value;
// 显示加载状态
loginLoader
.style
.display = 'block';
loginError
.style
.display = 'none';
// 模拟登录请求延迟
setTimeout
(() => {
const authResult = authenticateUser
(email, password
);
if
(authResult
.success
) {
// 保存登录状态
localStorage
.setItem
("isLoggedIn", "true"
);
localStorage
.setItem
("currentUser",
JSON
.stringify
(authResult
.userData
));
// 更新仪表盘信息
updateDashboard
(authResult
.userData
);
// 切换到仪表盘
loginPage
.classList
.add
("hidden"
);
dashboardPage
.classList
.remove
("hidden"
);
} else {
showLoginError
(authResult
.message
);
}
loginLoader
.style
.display = 'none';
},
1500
);
}
);
// ======== 退出功能 ========
logoutBtn
.addEventListener
("click", function
() {
// 清除登录状态
localStorage
.removeItem
("isLoggedIn"
);
localStorage
.removeItem
("currentUser"
);
// 返回登录页面
dashboardPage
.classList
.add
("hidden"
);
loginPage
.classList
.remove
("hidden"
);
// 重置表单
login
Form.reset
();
clearMessages
();
}
);
// ======== 辅助函数 ========
function authenticateUser
(email, password
) {
// 从本地存储获取用户数据
const userData = localStorage
.getItem
(email
);
if
(!userData
) {
return {
success: false,
message: "邮箱未注册"
};
}
const user =
JSON
.parse
(userData
);
// 实际应用中应使用密码哈希值比较
if
(password !== user
.password
) {
return {
success: false,
message: "邮箱或密码错误"
};
}
return {
success: true,
userData: user
};
}
function updateDashboard
(userData
) {
userDisplayName
.textContent = userData
.username;
userEmailDisplay
.textContent = userData
.email;
registrationDate
.textContent = userData
.registrationDate;
}
function showLoginError
(message
) {
loginError
.textContent = message;
loginError
.style
.display = 'block';
}
function showSignupError
(message
) {
signupError
.textContent = message;
signupError
.style
.display = 'block';
signupSuccess
.style
.display = "none";
}
function clearMessages
() {
loginError
.style
.display = 'none';
signupError
.style
.display = 'none';
signupSuccess
.style
.display = 'none';
}
// 页面加载时检查登录状态
window
.addEventListener
('DOMContentLoaded',
() => {
const isLoggedIn = localStorage
.getItem
('isLoggedIn'
) === 'true';
const currentUser = localStorage
.getItem
('currentUser'
);
if
(isLoggedIn && currentUser
) {
updateDashboard
(JSON
.parse
(currentUser
));
loginPage
.classList
.add
("hidden"
);
dashboardPage
.classList
.remove
("hidden"
);
}
}
);
</script>
</body>
</html>
登陆成功后加一个上下滑动翻页功能
本文介绍了如何使用JavaScript的focus方法来使表单中的特定元素获得焦点。通过两种方式实现：一是通过表单ID和元素name属性结合的方式；二是直接利用元素ID进行聚焦。
扫一扫
2735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
