使用JavaScrip和HTML搭建一个简单的博客网站系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增强版简易博客系统</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: auto;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.post {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.post-author,
.post-date {
color: #555;
}
.comment-section {
margin-top: 10px;
}
.comment {
margin-left: 20px;
padding: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>增强版简易博客系统</h1>
<div id="login-form" class="form-container">
<h2>登录</h2>
<div class="form-group">
<label for="login-email">邮箱:</label>
<input type="text" id="login-email">
</div>
<div class="form-group">
<label for="login-password">密码:</label>
<input type="password" id="login-password">
</div>
<button onclick="handleLogin()">登录</button>
<p>还没有账号？<a href="#" onclick="showRegisterForm()">注册</a></p>
<p><a href="#" onclick="showForgotPasswordForm()">忘记密码？</a></p>
</div>
<div id="register-form" class="form-container" style="display:none;">
<h2>注册</h2>
<div class="form-group">
<label for="register-name">用户名:</label>
<input type="text" id="register-name">
</div>
<div class="form-group">
<label for="register-email">邮箱:</label>
<input type="text" id="register-email">
</div>
<div class="form-group">
<label for="register-password">密码:</label>
<input type="password" id="register-password">
</div>
<button onclick="handleRegister()">注册</button>
<p>已经有账号？<a href="#" onclick="showLoginForm()">登录</a></p>
</div>
<div id="forgot-password-form" class="form-container" style="display:none;">
<h2>找回密码</h2>
<div class="form-group">
<label for="forgot-email">邮箱:</label>
<input type="text" id="forgot-email">
</div>
<button onclick="handleForgotPassword()">发送重置链接</button>
<p><a href="#" onclick="showLoginForm()">返回登录</a></p>
</div>
<div id="change-password-form" class="form-container" style="display:none;">
<h2>修改密码</h2>
<div class="form-group">
<label for="new-password">新密码:</label>
<input type="password" id="new-password">
</div>
<button onclick="handleChangePassword()">修改密码</button>
<p><a href="#" onclick="showLoginForm()">返回登录</a></p>
</div>
<div id="blog-form" class="form-container" style="display:none;">
<h2>发表新文章</h2>
<div class="form-group">
<label for="post-title">标题:</label>
<input type="text" id="post-title">
</div>
<div class="form-group">
<label for="post-content">内容:</label>
<textarea id="post-content"></textarea>
</div>
<button onclick="publishPost()">发表</button>
<p><a href="#" onclick="logout()">注销</a></p>
</div>
<div id="posts-list" style="margin-top: 20px;"></div>
</div>
<script>
let users = [];
let currentUser = null;
let posts = [];
function showLoginForm() {
document.getElementById('login-form').style.display = 'block';
document.getElementById('register-form').style.display = 'none';
document.getElementById('forgot-password-form').style.display = 'none';
document.getElementById('change-password-form').style.display = 'none';
document.getElementById('blog-form').style.display = 'none';
document.getElementById('posts-list').innerHTML = '';
}
function showRegisterForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'block';
document.getElementById('forgot-password-form').style.display = 'none';
document.getElementById('change-password-form').style.display = 'none';
document.getElementById('blog-form').style.display = 'none';
document.getElementById('posts-list').innerHTML = '';
}
function showForgotPasswordForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'none';
document.getElementById('forgot-password-form').style.display = 'block';
document.getElementById('change-password-form').style.display = 'none';
document.getElementById('blog-form').style.display = 'none';
document.getElementById('posts-list').innerHTML = '';
}
function handleChangePasswordForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'none';
document.getElementById('forgot-password-form').style.display = 'none';
document.getElementById('change-password-form').style.display = 'block';
document.getElementById('blog-form').style.display = 'none';
document.getElementById('posts-list').innerHTML = '';
}
function handleRegister() {
const name = document.getElementById('register-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
if (!name || !email || !password) {
alert('请填写所有字段');
return;
}
const userExists = users.some(user => user.email === email);
if (userExists) {
alert('该邮箱已被注册');
return;
}
users.push({ name, email, password });
alert('注册成功！');
showLoginForm();
}
function handleLogin() {
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
const user = users.find(u => u.email === email && u.password === password);
if (!user) {
alert('邮箱或密码错误');
return;
}
currentUser = user;
alert(`欢迎回来，${currentUser.name}！`);
showBlogForm();
}
function handleForgotPassword() {
const email = document.getElementById('forgot-email').value;
const user = users.find(u => u.email === email);
if (!user) {
alert('未找到该邮箱的用户');
return;
}
alert('已发送密码重置链接到您的邮箱，请检查邮件。');
handleChangePasswordForm()