插件介绍
插件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Register</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fffbe8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff3cd;
padding: 20px;
border: 1px solid #ffeeba;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.container h2 {
margin: 0 0 15px;
color: #856404;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #856404;
}
.input-group input {
width: 100%;
padding: 8px;
border: 1px solid #ffeeba;
border-radius: 5px;
box-sizing: border-box;
}
.button {
background-color: #ffc107;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
.button:hover {
background-color: #e0a800;
}
.toggle {
margin-top: 15px;
color: #856404;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2 id="form-title">Login</h2>
<div id="login-form" class="form">
<div class="input-group">
<label for="login-username">Username</label>
<input type="text" id="login-username" name="username" required>
</div>
<div class="input-group">
<label for="login-password">Password</label>
<input type="password" id="login-password" name="password" required>
</div>
<button class="button" onclick="login()">Login</button>
</div>
<div id="register-form" class="form" style="display: none;">
<div class="input-group">
<label for="register-username">Username</label>
<input type="text" id="register-username" name="username" required>
</div>
<div class="input-group">
<label for="register-password">Password</label>
<input type="password" id="register-password" name="password" required>
</div>
<div class="input-group">
<label for="register-email">Email</label>
<input type="email" id="register-email" name="email" required>
</div>
<button class="button" onclick="register()">Register</button>
</div>
<div class="toggle" onclick="toggleForm()">Don't have an account? Register</div>
</div>
<script>
function toggleForm() {
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const formTitle = document.getElementById('form-title');
const toggleText = document.querySelector('.toggle');
if (loginForm.style.display === 'none') {
loginForm.style.display = 'block';
registerForm.style.display = 'none';
formTitle.textContent = 'Login';
toggleText.textContent = "Don't have an account? Register";
} else {
loginForm.style.display = 'none';
registerForm.style.display = 'block';
formTitle.textContent = 'Register';
toggleText.textContent = "Already have an account? Login";
}
}
function login() {
// 在这里添加登录逻辑
alert('Login function not implemented.');
}
function register() {
// 在这里添加注册逻辑
alert('Register function not implemented.');
}
</script>
</body>
</html>
