前言
写的是个人博客界面，代码比较冗余，web的一个小作业。。。。。。
因为后面改了一次，有些css是直接写到了html文件中，重复的代码也比较多。
项目结构
CSS
style.css
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: 'Arial', sans-serif;
/* background-color: #6767a7; */
background-image: url('../img/background.jpg');
display: flex;
flex-direction: column;
}
header {
background-image: url('../img/background.jpg');
color: #fff;
padding: 5px 0;
padding-bottom: 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
border: 1px solid #ccc; /* 添加边框线 */
}
header h1 {
font-size: 24px;
color: #000;
margin: 0 auto;
}
nav {
display: flex;
justify-content: center;
margin-top: 30px;
margin: 0 auto;
}
nav a {
color: #000;
text-decoration: none;
margin-bottom: 0px;
margin-right: 10px;
font-size: 18px;
padding: 10px 20px;
border-radius: 20px;
transition: background-color 0.3s ease;
/* border: 1px solid #a585ed; */
}
nav a:hover {
background-color: #9e9e9e;
}
nav button{
color: #000;
background-color:#ffffff ;
text-decoration: none;
margin-bottom: 0px;
margin-right: 10px;
font-size: 18px;
padding: 10px 20px;
border-radius: 20px;
transition: background-color 0.3s ease;
}
nav button:hover{
background-color: #9e9e9e;
}
.settings-button {
width: 100px;
height: 50px;
position: absolute;
top: 10px; /* 调整为 10px */
right: 10px; /* 调整为 10px */
background-color: #5c67f2;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 8px; /* 添加圆角 */
}
.settings-button:hover {
background-color: #4a54d1;
}
.settings-menu {
display: none;
position: absolute;
top: 20%;
right: 0;
background-color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
overflow: hidden;
}
.settings-menu a {
display: block;
padding: 10px 15px;
color: #555;
text-decoration: none;
transition: background-color 0.3s ease;
}
.settings-menu a:hover {
background-color: #f1f1f1;
}
/* Main Content */
main {
position: relative;
flex: 1;
padding: 20px 15%; /* 减少左右留白，主体部分占四分之三 */
max-width: 1200px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
min-height: calc(100vh - 120px); /* 确保主体内容高度至少为视口高度减去头部和页脚的高度 */
}
#post-list, #video-list, #music-list {
margin-top: 20px;
}
/* 基本的网格布局 */
#images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 每个图片的最小宽度为200px，最大宽度为1fr */
gap: 5px; /* 图片之间的间距 */
padding: 10px; /* 容器的内边距 */
}
#images img {
width: 100%; /* 图片宽度占满整个网格单元 */
height: auto; /* 保持图片的宽高比 */
object-fit: cover; /* 保持图片的宽高比并裁剪图片以填充网格单元 */
}
/* 基本的网格布局 */
#introduction {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 每个图片的最小宽度为200px，最大宽度为1fr */
gap: 5px; /* 图片之间的间距 */
padding: 10px; /* 容器的内边距 */
}
#introduction img {
width: 15%; /* 图片宽度占满整个网格单元 */
height: auto; /* 保持图片的宽高比 */
object-fit: cover; /* 保持图片的宽高比并裁剪图片以填充网格单元 */
}
/* 其他样式 */
.video, .music {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
transition: box-shadow 0.3s ease;
}
.post {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.image {
display: block;
max-width: 100%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
transition: box-shadow 0.3s ease;
}
.post:hover, .image:hover, .video:hover, .music:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.post h3, .image h3, .video h3, .music h3 {
font-size: 20px;
margin-bottom: 10px;
}
.post p, .image p, .video p, .music p {
font-size: 16px;
color: #555;
margin-bottom: 15px;
}
.post a, .image a, .video a, .music a {
color: #5c67f2;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.post a:hover, .image a:hover, .video a:hover, .music a:hover {
color: #4a54d1;
}
/* Search Container */
.search-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.search-container input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px 0 0 5px;
width: 300px;
font-size: 16px;
}
.search-container button {
padding: 8px 15px; /* 减小按钮尺寸 */
width: 15%;
background-color: #5c67f2;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-container button:hover {
background-color: #4a54d1;
}
.avatar {
display: block;
margin: 0 auto;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar:hover {
transform: scale(1.1);
}
/* Action Button */
.action-button {
width: 100px;
height: 50px;
position: absolute;
bottom: 10px; /* 调整为 10px */
right: 10px; /* 调整为 10px */
background-color: #5c67f2;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 8px; /* 添加圆角 */
}
.action-button:hover {
background-color: #4a54d1;
}
/* Upload Form Modal */
.upload-modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.full-article-modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.about-me-modal {
display: none; /* 默认隐藏模态框 */
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.upload-modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.full-article-modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.about-me-modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
/* 鼠标指针显示为手形 */
cursor: pointer;
}
.upload-modal-content h2 {
margin-bottom: 20px;
}
.input-field {
position: relative;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #777;
font-size: 18px;
}
.input-field input, .input-field textarea {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #000;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #777;
outline: none;
background: transparent;
padding-left: 50px;
flex: 1;
}
.upload-modal-content button {
width: 100%;
padding: 10px 0;
color: #fff;
font-size: 16px;
background-color: #5c67f2;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.upload-modal-content button:hover {
background-color: #4a54d1;
}
.close-modal:hover,
.close-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.post {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.search-container {
margin-bottom: 20px;
}
/* Footer */
footer {
background: url('../img/background.jpg');
color: #000;
text-align: center;
padding: 10px 0;
margin-top: 5px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
position: relative; /* 确保页脚不会被主体内容覆盖 */
}
footer p {
font-size: 14px;
}
/* Login and Register Forms */
.login-container, .register-container {
width: 100%;
max-width: 400px;
position: relative;
margin: auto;
margin-top: 50px;
}
.login-box, .register-box {
width: 100%;
background-color: #fff;
padding: 40px;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
text-align: center;
}
.input-field {
position: relative;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-25px);
color: #777;
font-size: 18px;
}
.input-field input, .input-field textarea {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #000;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #777;
outline: none;
background: transparent;
padding-left: 50px;
flex: 1;
}
button {
width: 100%;
padding: 10px 0;
color: #fff;
font-size: 16px;
background-color: #5c67f2;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.message {
margin-top: 20px;
color: #777;
}
.message a {
color: #5c67f2;
text-decoration: none;
}
.about-me-modal-close {
/* 鼠标指针显示为手形 */
cursor: pointer;
}JS
dynamic.js
javascript
document.addEventListener('DOMContentLoaded', function() {
const uploadButton = document.getElementById('uploadButton');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const uploadPostForm = document.getElementById('uploadPostForm');
const dynamicContent = document.getElementById('dynamicContent');
// 显示模态框
uploadButton.addEventListener('click', function() {
uploadModal.style.display = 'flex';
});
// 关闭模态框
closeModal.addEventListener('click', function() {
uploadModal.style.display = 'none';
});
// 表单提交处理
uploadPostForm.addEventListener('submit', function(event) {
event.preventDefault();
const postImage = document.getElementById('postImage').files[0];
const postDescription = document.getElementById('postDescription').value;
if (postImage || postDescription) {
// 创建新的动态元素
const newPost = document.createElement('div');
newPost.classList.add('post');
// 添加作者和日期
const postHeader = `
<div class="post-header">
<span class="post-author">Xuan</span>
<span class="post-date">${new Date().toLocaleDateString()}</span>
</div>
`;
newPost.innerHTML += postHeader;
// 添加动态内容
const postBody = `
<div class="post-body">
<p>${postDescription}</p>
${postImage ? `<img src="${URL.createObjectURL(postImage)}" alt="动态照片" class="post-image">` : ''}
</div>
`;
newPost.innerHTML += postBody;
// 添加操作按钮
const postFooter = `
<div class="post-footer">
<a href="#" class="post-action"><i class="far fa-thumbs-up"></i> 赞</a>
<a href="#" class="post-action"><i class="far fa-comment"></i> 评论</a>
<a href="#" class="post-action"><i class="far fa-share-square"></i> 分享</a>
</div>
`;
newPost.innerHTML += postFooter;
// 将新动态添加到动态列表顶部
dynamicContent.insertBefore(newPost, dynamicContent.firstChild);
// 清空表单
uploadPostForm.reset();
// 关闭模态框
uploadModal.style.display = 'none';
} else {
alert('请填写完整的信息');
}
});
const dropbtn = document.getElementById('aboutMeButton');
const aboutMeModal = document.getElementById('aboutMeModal');
const closeAboutMeModal = document.getElementById('closeAboutMeModal');
// 显示关于我模态框
dropbtn.addEventListener('click', () => {
console.log('clicked');
aboutMeModal.style.display = 'block';
});
// 关闭关于我模态框
closeAboutMeModal.addEventListener('click', () => {
aboutMeModal.style.display = 'none';
});
});images.js
javascript
document.addEventListener('DOMContentLoaded', () => {
const imagesDiv = document.getElementById('images');
const uploadButton = document.getElementById('uploadButton');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const uploadImageForm = document.getElementById('uploadImageForm');
const images = JSON.parse(localStorage.getItem('images')) || [];
function renderImages(imagesList) {
imagesDiv.innerHTML = '';
imagesList.forEach(image => {
const imageElement = document.createElement('div');
imageElement.classList.add('image');
imageElement.innerHTML = `
<img src="${image.url}" alt="${image.alt}">
<p>${image.description}</p>
`;
imageElement.addEventListener('contextmenu', (event) => {
event.preventDefault();
const confirmDelete = confirm('确定要删除这张图片吗？');
if (confirmDelete) {
images.splice(images.indexOf(image), 1);
localStorage.setItem('images', JSON.stringify(images));
renderImages(images);
}
});
imagesDiv.appendChild(imageElement);
});
}
renderImages(images);
// Show upload modal
uploadButton.addEventListener('click', () => {
uploadModal.style.display = 'block';
});
// Close upload modal
closeModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
// Close upload modal when clicking outside
window.addEventListener('click', (event) => {
if (event.target == uploadModal) {
uploadModal.style.display = 'none';
}
});
// Handle form submission
uploadImageForm.addEventListener('submit', (event) => {
event.preventDefault();
const fileInput = document.getElementById('imageFile');
const description = document.getElementById('imageDescription').value.trim();
if (fileInput.files.length > 0 && description) {
const file = fileInput.files[0];
const reader = new FileReader();
reader.onloadend = () => {
const newImage = {
id: Date.now(),
url: reader.result,
description
};
images.push(newImage);
localStorage.setItem('images', JSON.stringify(images));
renderImages(images);
uploadModal.style.display = 'none';
};
reader.readAsDataURL(file);
} else {
alert('请选择图片并填写描述');
}
});
// 显示设置菜单
settingsButton.addEventListener('click', () => {
settingsMenu.style.display = settingsMenu.style.display === 'block' ? 'none' : 'block';
});
// // 退出功能
// logoutLink.addEventListener('click', (event) => {
// event.preventDefault(); // 阻止链接的默认行为
// // 执行退出操作，例如重定向到登录页面或清除会话
// alert('退出成功！');
// // window.location.href = 'login.html'; // 重定向到登录页面
// settingsMenu.style.display = 'none'; // 关闭设置菜单
// });
// 点击页面其他地方关闭设置菜单
document.addEventListener('click', (event) => {
if (!settingsButton.contains(event.target) && !settingsMenu.contains(event.target)) {
settingsMenu.style.display = 'none';
}
});
const dropbtn = document.getElementById('aboutMeButton');
const aboutMeModal = document.getElementById('aboutMeModal');
const closeAboutMeModal = document.getElementById('closeAboutMeModal');
// 显示关于我模态框
dropbtn.addEventListener('click', () => {
console.log('clicked');
aboutMeModal.style.display = 'block';
});
// 关闭关于我模态框
closeAboutMeModal.addEventListener('click', () => {
aboutMeModal.style.display = 'none';
});
});login.js
javascript
// 为登录表单的提交事件添加监听器
document.getElementById('loginForm').addEventListener('submit', function(event) {
// 阻止默认的表单提交行为，以进行自定义处理
event.preventDefault();
// 获取用户名和密码输入框的值
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 从本地存储中获取用户数据，如果不存在，则初始化为空数组
const users = JSON.parse(localStorage.getItem('users')) || [];
// 查找匹配用户名和密码的用户
const user = users.find(u => u.username === username && u.password === password);
// 如果找到匹配的用户
if (user) {
// 将当前用户信息存储到本地存储
localStorage.setItem('currentUser', JSON.stringify(user));
// 重定向到主页
window.location.href = 'index.html';
} else {
// 如果没有找到匹配的用户，显示错误提示
alert('用户名或密码错误');
}
});music.js
javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取页面元素
const uploadButton = document.getElementById('uploadButton');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const uploadMusicForm = document.getElementById('uploadMusicForm');
const musicsContainer = document.getElementById('musics');
const settingsButton = document.getElementById('settingsButton');
const settingsMenu = document.getElementById('settingsMenu');
const logoutLink = document.querySelector('.settings-menu a[href="register.html"]'); // 正确选择退出链接
let currentPlayingAudio = null; // 跟踪当前正在播放的音频
// 显示上传模态框
uploadButton.addEventListener('click', () => {
uploadModal.style.display = 'block';
});
// 关闭上传模态框
closeModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
// 点击上传模态框外部关闭模态框
uploadModal.addEventListener('click', (event) => {
if (event.target === uploadModal) {
uploadModal.style.display = 'none';
}
});
// 阻止上传模态框内部元素的点击事件冒泡到模态框
const modalContent = document.querySelector('.upload-modal-content');
modalContent.addEventListener('click', (event) => {
event.stopPropagation();
});
// 提交表单
uploadMusicForm.addEventListener('submit', async (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const musicFile = document.getElementById('musicFile').files[0];
const musicDescription = document.getElementById('musicDescription').value;
if (musicFile && musicDescription) {
const formData = new FormData();
formData.append('musicFile', musicFile);
formData.append('musicDescription', musicDescription);
try {
const response = await fetch('/upload-music', {
method: 'POST',
body: formData
});
if (response.ok) {
const result = await response.json();
const newMusic = createMusicElement(result.url, result.description);
musicsContainer.appendChild(newMusic);
uploadModal.style.display = 'none';
alert('音乐上传成功！');
} else {
alert('音乐上传失败，请稍后再试。');
}
} catch (error) {
console.error('上传音乐时发生错误:', error);
alert('音乐上传失败，请稍后再试。');
}
}
});
// 创建新的音乐元素
function createMusicElement(src, description) {
const musicDiv = document.createElement('div');
musicDiv.className = 'music';
const audio = document.createElement('audio');
audio.controls = true;
const source = document.createElement('source');
source.src = src;
source.type = 'audio/mpeg';
audio.appendChild(source);
audio.innerHTML = 'Your browser does not support the audio element.';
// 添加播放控制逻辑
audio.addEventListener('play', () => {
if (currentPlayingAudio && currentPlayingAudio !== audio) {
currentPlayingAudio.pause();
}
currentPlayingAudio = audio;
});
const desc = document.createElement('p');
desc.textContent = description;
musicDiv.appendChild(audio);
musicDiv.appendChild(desc);
return musicDiv;
}
// 显示设置菜单
settingsButton.addEventListener('click', () => {
settingsMenu.style.display = settingsMenu.style.display === 'block' ? 'none' : 'block';
});
// 退出功能
if (logoutLink) { // 检查是否找到退出链接
logoutLink.addEventListener('click', (event) => {
event.preventDefault(); // 阻止链接的默认行为
// 执行退出操作，例如重定向到登录页面或清除会话
alert('退出成功！');
// window.location.href = 'login.html'; // 重定向到登录页面
settingsMenu.style.display = 'none'; // 关闭设置菜单
});
}
// 点击页面其他地方关闭设置菜单
document.addEventListener('click', (event) => {
if (!settingsButton.contains(event.target) && !settingsMenu.contains(event.target)) {
settingsMenu.style.display = 'none';
}
});
// 确保所有已存在的音频元素也遵循相同的播放规则
document.querySelectorAll('audio').forEach(audio => {
audio.addEventListener('play', () => {
if (currentPlayingAudio && currentPlayingAudio !== audio) {
currentPlayingAudio.pause();
}
currentPlayingAudio = audio;
});
});
const dropbtn = document.getElementById('aboutMeButton');
const aboutMeModal = document.getElementById('aboutMeModal');
const closeAboutMeModal = document.getElementById('closeAboutMeModal');
// 显示关于我模态框
dropbtn.addEventListener('click', () => {
console.log('clicked');
aboutMeModal.style.display = 'block';
});
// 关闭关于我模态框
closeAboutMeModal.addEventListener('click', () => {
aboutMeModal.style.display = 'none';
});
});register.js
javascript
// 为名为 'registerForm' 的表单添加提交事件监听器，以处理用户注册操作。
document.getElementById('registerForm').addEventListener('submit', function(event) {
// 阻止表单提交的默认行为，以自定义处理逻辑。
event.preventDefault();
// 获取用户名和密码输入框的值。
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 用户数据是通过 localStorage 存储在浏览器中的，以 JSON 格式的字符串形式保存。
const users = JSON.parse(localStorage.getItem('users')) || [];
// 检查是否存在相同用户名的用户。
const existingUser = users.find(u => u.username === username);
// 如果找到同名用户，则弹出警告提示用户名已存在。
if (existingUser) {
alert('用户名已存在');
} else {
// 否则，将新用户添加到用户数组中，并更新 localStorage 中的数据。
users.push({ username, password });
localStorage.setItem('users', JSON.stringify(users));
// 注册成功后，显示成功提示，并重定向到登录页面。
alert('注册成功');
window.location.href = 'login.html';
}
});script.js
javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取页面元素引用
const uploadButton = document.getElementById('uploadButton');
const uploadModal = document.getElementById('uploadModal');
const closeModal = document.getElementById('closeModal');
const uploadPostForm = document.getElementById('uploadPostForm');
const postsContainer = document.getElementById('posts');
const postTemplate = document.getElementById('post-template');
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const fullArticleModal = document.getElementById('fullArticleModal');
const closeFullArticleModal = document.getElementById('closeFullArticleModal');
const articleTitle = document.getElementById('articleTitle');
const articleContent = document.getElementById('articleContent');
const settingsButton = document.getElementById('settingsButton');
const settingsMenu = document.getElementById('settingsMenu');
const logoutLink = document.getElementById('logoutLink');
const dropbtn = document.getElementById('aboutMeButton');
const aboutMeModal = document.getElementById('aboutMeModal');
const closeAboutMeModal = document.getElementById('closeAboutMeModal');
// 检查元素是否获取成功
console.log(dropbtn); // 应该输出 button 元素
console.log(aboutMeModal); // 应该输出 div 元素
console.log(closeAboutMeModal); // 应该输出 span 元素
// 显示上传模态框
uploadButton.addEventListener('click', () => {
uploadModal.style.display = 'block';
});
// 关闭上传模态框
closeModal.addEventListener('click', () => {
uploadModal.style.display = 'none';
});
// 点击上传模态框外部关闭模态框
uploadModal.addEventListener('click', (event) => {
if (event.target === uploadModal) {
uploadModal.style.display = 'none';
}
});
// 阻止上传模态框内部元素的点击事件冒泡到模态框
const modalContent = document.querySelector('.upload-modal-content');
modalContent.addEventListener('click', (event) => {
event.stopPropagation();
});
// 提交表单
uploadPostForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const postTitle = document.getElementById('postTitle').value;
const postContent = document.getElementById('postContent').value;
if (postTitle && postContent) {
// 克隆模板并填充数据
const newPost = postTemplate.cloneNode(true);
newPost.style.display = 'block';
newPost.querySelector('h3').textContent = postTitle;
newPost.querySelector('p').textContent = postContent;
newPost.querySelector('.read-more').dataset.title = postTitle;
newPost.querySelector('.read-more').dataset.content = postContent;
postsContainer.appendChild(newPost);
// 清空表单
document.getElementById('postTitle').value = '';
document.getElementById('postContent').value = '';
// 关闭模态框
uploadModal.style.display = 'none';
}
});
// 搜索功能
searchButton.addEventListener('click', () => {
const searchTerm = searchInput.value.toLowerCase();
const posts = postsContainer.querySelectorAll('.post');
posts.forEach(post => {
const title = post.querySelector('h3').textContent.toLowerCase();
const content = post.querySelector('p').textContent.toLowerCase();
if (title.includes(searchTerm) || content.includes(searchTerm)) {
post.style.display = 'block';
} else {
post.style.display = 'none';
}
});
});
// 处理"阅读全文"按钮点击事件
postsContainer.addEventListener('click', (event) => {
if (event.target.classList.contains('read-more')) {
const title = event.target.dataset.title;
const content = event.target.dataset.content;
articleTitle.textContent = title;
articleContent.textContent = content;
fullArticleModal.style.display = 'block';
}
});
// 关闭完整文章模态框
closeFullArticleModal.addEventListener('click', () => {
fullArticleModal.style.display = 'none';
});
// 点击完整文章模态框外部关闭模态框
fullArticleModal.addEventListener('click', (event) => {
if (event.target === fullArticleModal) {
fullArticleModal.style.display = 'none';
}
});
// 阻止完整文章模态框内部元素的点击事件冒泡到模态框
const fullArticleModalContent = document.querySelector('.full-article-modal-content');
fullArticleModalContent.addEventListener('click', (event) => {
event.stopPropagation();
});
// 显示设置菜单
settingsButton.addEventListener('click', () => {
settingsMenu.style.display = settingsMenu.style.display === 'block' ? 'none' : 'block';
});
// 点击页面其他地方关闭设置菜单
document.addEventListener('click', (event) => {
if (!settingsButton.contains(event.target) && !settingsMenu.contains(event.target)) {
settingsMenu.style.display = 'none';
}
});
// 显示关于我模态框
dropbtn.addEventListener('click', () => {
console.log('clicked');
aboutMeModal.style.display = 'block';
});
// 关闭关于我模态框
closeAboutMeModal.addEventListener('click', () => {
aboutMeModal.style.display = 'none';
});
});html
dynamic.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的动态 - 个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
h3{
color: black;
}
h3 a{
color: #4a54d1;
text-decoration: none;
}
.nav-menu{
margin-top: 5px;
border-top: 1px solid #ccc; /* 添加边框线 */
background-color: #ffffff;
}
.welcome{
color: #000000;
}
.welcome i{
padding-left: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="profile-info">
<div class="avatar">
<img src="./img/head.jpg" alt="Avatar">
</div>
<div class="details">
<h1>Xuan</h1>
</div>
<button class="settings-button" id="settingsButton" width="100px" height="50px">设置</button>
<div class="settings-menu" id="settingsMenu">
<a href="register.html">退出</a>
<a href="login.html">切换账号</a>
</div>
</div>
<div class="nav-menu">
<nav>
<a href="dynamic.html">我的动态</a>
<a href="index.html">我发表的文章</a>
<a href="images.html">我的图片</a>
<!-- <a href="introduce.html">个人介绍</a> -->
<a href="music.html">喜欢的音乐</a>
<div class="dropdown">
<button class="dropbtn" id="aboutMeButton">关于我</button>
</div>
</nav>
</div>
</header>
<main>
<section id="introduction">
<div class="dynamic-content" id="dynamicContent">
<div class="post">
<div class="post-header">
<span class="post-author">Xuan</span>
<span class="post-date">2024-11-18</span>
</div>
<div class="post-body">
<p>今天天气真好，去公园散步了，感觉非常放松。</p>
</div>
<div class="post-footer">
<a href="#" class="post-action"><i class="far fa-thumbs-up"></i> 赞</a>
<a href="#" class="post-action"><i class="far fa-comment"></i> 评论</a>
<a href="#" class="post-action"><i class="far fa-share-square"></i> 分享</a>
</div>
</div>
<div class="post">
<div class="post-header">
<span class="post-author">Xuan</span>
<span class="post-date">2024-11-17</span>
</div>
<div class="post-body">
<p>最近在学习Python的新特性，感觉收获颇丰。</p>
</div>
<div class="post-footer">
<a href="#" class="post-action"><i class="far fa-thumbs-up"></i> 赞</a>
<a href="#" class="post-action"><i class="far fa-comment"></i> 评论</a>
<a href="#" class="post-action"><i class="far fa-share-square"></i> 分享</a>
</div>
</div>
</div>
</section>
<button class="action-button" id="uploadButton">上传</button>
</main>
<footer>
<p>© 2024 个人博客系统</p>
</footer>
<!-- 上传动态模态框 -->
<div id="uploadModal" class="upload-modal">
<div class="upload-modal-content">
<span class="close-modal" id="closeModal">×</span>
<form id="uploadPostForm">
<h2>上传动态</h2>
<div class="input-field">
<i class="fas fa-camera"></i>
<input type="file" id="postImage" accept="image/*">
</div>
<div class="input-field">
<i class="fas fa-edit"></i>
<textarea id="postDescription" placeholder="输入动态描述"></textarea>
</div>
<button type="submit">发布</button>
</form>
</div>
</div>
<!-- 关于我模态框 -->
<div id="aboutMeModal" class="about-me-modal">
<div class="about-me-modal-content">
<span class="about-me-modal-close" id="closeAboutMeModal">×</span>
<div class="profile-info">
<div class="profile-details">
<p>可以填入自己的介绍信息</p>
</div>
</div>
</div>
</div>
<script src="js/dynamic.js"></script>
</body>
</html>images.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片 - 个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
h3{
color: black;
}
h3 a{
color: #4a54d1;
text-decoration: none;
}
.nav-menu{
margin-top: 5px;
border-top: 1px solid #ccc; /* 添加边框线 */
background-color: #ffffff;
}
.welcome{
color: #000000;
}
.welcome i{
padding-left: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="profile-info">
<div class="avatar">
<img src="./img/head.jpg" alt="Avatar">
</div>
<div class="details">
<h1>Xuan</h1>
</div>
<button class="settings-button" id="settingsButton" width="100px" height="50px">设置</button>
<div class="settings-menu" id="settingsMenu">
<a href="register.html">退出</a>
<a href="login.html">切换账号</a>
</div>
</div>
<div class="nav-menu">
<nav>
<a href="dynamic.html">我的动态</a>
<a href="index.html">我发表的文章</a>
<a href="images.html">我的图片</a>
<!-- <a href="introduce.html">个人介绍</a> -->
<a href="music.html">喜欢的音乐</a>
<div class="dropdown">
<button class="dropbtn" id="aboutMeButton">关于我</button>
</div>
</nav>
</div>
</header>
<main>
<section id="images" class="image-grid">
<img src="path/to/image1.jpg" alt="Image 1">
<img src="path/to/image2.jpg" alt="Image 2">
<img src="path/to/image3.jpg" alt="Image 3">
<img src="path/to/image4.jpg" alt="Image 4">
<!-- 更多图片 -->
</section>
<button class="action-button" id="uploadButton">上传</button>
</main>
<footer>
<p>© 2024 个人博客系统</p>
</footer>
<!-- 上传图片模态框 -->
<div id="uploadModal" class="upload-modal">
<div class="upload-modal-content">
<span class="close-modal" id="closeModal">×</span>
<form id="uploadImageForm">
<h2>上传图片</h2>
<div class="input-field">
<i class="fas fa-image"></i>
<input type="file" id="imageFile" accept="image/*">
</div>
<div class="input-field">
<i class="fas fa-edit"></i>
<input type="text" id="imageDescription" placeholder="图片描述">
</div>
<button type="submit">上传</button>
</form>
</div>
</div>
<!-- 关于我模态框 -->
<div id="aboutMeModal" class="about-me-modal">
<div class="about-me-modal-content">
<span class="about-me-modal-close" id="closeAboutMeModal">×</span>
<div class="profile-info">
<div class="profile-details">
<p>可以填入自己的介绍信息</p>
</div>
</div>
</div>
</div>
<script src="js/images.js"></script>
</body>
</html>index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
h3{
color: black;
}
h3 a{
color: #4a54d1;
text-decoration: none;
}
.nav-menu{
margin-top: 5px;
border-top: 1px solid #ccc; /* 添加边框线 */
background-color: #ffffff;
}
.welcome{
color: #000000;
}
.welcome i{
padding-left: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="profile-info">
<div class="avatar">
<img src="./img/head.jpg" alt="Avatar">
</div>
<div class="details">
<h1>Xuan</h1>
</div>
<button class="settings-button" id="settingsButton" width="100px" height="50px">设置</button>
<div class="settings-menu" id="settingsMenu">
<a href="register.html">退出</a>
<a href="login.html">切换账号</a>
</div>
</div>
<div class="nav-menu">
<nav>
<a href="dynamic.html">我的动态</a>
<a href="index.html">我发表的文章</a>
<a href="images.html">我的图片</a>
<!-- <a href="introduce.html">个人介绍</a> -->
<a href="music.html">喜欢的音乐</a>
<div class="dropdown">
<button class="dropbtn" id="aboutMeButton">关于我</button>
</div>
</nav>
</div>
</header>
<main>
<section id="post-list">
<h2>文章列表</h2>
<div class="search-container">
<input type="text" id="searchInput" placeholder="搜索博客">
<button id="searchButton"><i class="fas fa-search"></i></button>
</div>
<div id="posts">
<!-- 示例文章 -->
<div class="post">
<h3>示例文章</h3>
<p>这是一个示例文章。</p>
<a href="#" class="read-more" data-title="示例文章" data-content="这是一个示例文章。">阅读全文</a>
</div>
<div class="post" id="post-template" style="display:none;">
<h3>{title}</h3>
<p>{content}</p>
<a href="#" class="read-more" data-title="{title}" data-content="{content}">阅读全文</a>
</div>
</div>
</section>
<button class="action-button" id="uploadButton">上传</button>
</main>
<footer>
<p>© 2024 个人博客系统</p>
</footer>
<!-- 上传文章模态框 -->
<div id="uploadModal" class="upload-modal">
<div class="upload-modal-content">
<span class="close-modal" id="closeModal">×</span>
<form id="uploadPostForm">
<h2>上传文章</h2>
<div class="input-field">
<i class="fas fa-heading"></i>
<input type="text" id="postTitle" placeholder="文章标题">
</div>
<div class="input-field">
<i class="fas fa-edit"></i>
<textarea id="postContent" placeholder="文章内容"></textarea>
</div>
<button type="submit" width="100px" height="50px">上传</button>
</form>
</div>
</div>
<!-- 完整文章模态框 -->
<div id="fullArticleModal" class="full-article-modal">
<div class="full-article-modal-content">
<span class="close-modal" id="closeFullArticleModal">×</span>
<h2 id="articleTitle"></h2>
<p id="articleContent"></p>
</div>
</div>
<!-- 关于我模态框 -->
<div id="aboutMeModal" class="about-me-modal">
<div class="about-me-modal-content">
<span class="about-me-modal-close" id="closeAboutMeModal">×</span>
<div class="profile-info">
<div class="profile-details">
<p>可以填入自己的介绍信息</p>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>login.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - 个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>登录</h2>
<form id="loginForm">
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="用户名" id="username" required>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="密码" id="password" required>
</div>
<button type="submit">登录</button>
<p class="message">还没有账号? <a href="register.html">注册</a></p>
</form>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>music.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>喜欢的音乐 - 个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
h3{
color: black;
}
h3 a{
color: #4a54d1;
text-decoration: none;
}
.nav-menu{
margin-top: 5px;
border-top: 1px solid #ccc; /* 添加边框线 */
background-color: #ffffff;
}
.welcome{
color: #000000;
}
.welcome i{
padding-left: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="profile-info">
<div class="avatar">
<img src="./img/head.jpg" alt="Avatar">
</div>
<div class="details">
<h1>Xuan</h1>
</div>
<button class="settings-button" id="settingsButton" width="100px" height="50px">设置</button>
<div class="settings-menu" id="settingsMenu">
<a href="register.html">退出</a>
<a href="login.html">切换账号</a>
</div>
</div>
<div class="nav-menu">
<nav>
<a href="dynamic.html">我的动态</a>
<a href="index.html">我发表的文章</a>
<a href="images.html">我的图片</a>
<!-- <a href="introduce.html">个人介绍</a> -->
<a href="music.html">喜欢的音乐</a>
<div class="dropdown">
<button class="dropbtn" id="aboutMeButton">关于我</button>
</div>
</nav>
</div>
</header>
<main>
<section id="music-list">
<div id="musics">
<!-- 示例音乐 -->
<div class="music">
<audio controls>
<source src="./music/music1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>词不达意</p>
</div>
<div class="music">
<audio controls>
<source src="./music/music2.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>摩天轮的思念</p>
</div>
</div>
<button class="action-button" id="uploadButton">上传</button>
</section>
</main>
<footer>
<p>© 2024 个人博客系统</p>
</footer>
<!-- 上传音乐模态框 -->
<div id="uploadModal" class="upload-modal">
<div class="upload-modal-content">
<span class="close-modal" id="closeModal">×</span>
<form id="uploadMusicForm" enctype="multipart/form-data">
<h2>上传音乐</h2>
<div class="input-field">
<i class="fas fa-music"></i>
<input type="file" id="musicFile" accept="audio/*" required>
</div>
<div class="input-field">
<i class="fas fa-edit"></i>
<input type="text" id="musicDescription" placeholder="音乐描述" required>
</div>
<button type="submit">上传</button>
</form>
</div>
</div>
<!-- 关于我模态框 -->
<div id="aboutMeModal" class="about-me-modal">
<div class="about-me-modal-content">
<span class="about-me-modal-close" id="closeAboutMeModal">×</span>
<div class="profile-info">
<div class="profile-details">
<p>可以填入自己的介绍信息</p>
</div>
</div>
</div>
</div>
<script src="js/music.js"></script>
</body>
</html>register.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册 - 个人博客</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>注册</h2>
<form id="registerForm">
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="用户名" id="username" required>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="密码" id="password" required>
</div>
<button type="submit">注册</button>
<p class="message">已有账号? <a href="login.html">登录</a></p>
</form>
</div>
</div>
<script src="js/register.js"></script>
</body>
</html>注意：
博客名字（每个html中）
示例动态的名字（每个html文件中）
背景图片（用自己喜欢的就行，名字保持一致即可）
界面展示
**注意：**如有错误，欢迎指正！！！