Web(CSS+JS+HTML实现简单界面)

前言

写的是个人博客界面，代码比较冗余，web的一个小作业。。。。。。

因为后面改了一次，有些css是直接写到了html文件中，重复的代码也比较多。

项目结构

CSS

style.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

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

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';
    });
});

// 为登录表单的提交事件添加监听器
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

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';
    });
});

// 为名为 '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

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

<!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>&copy; 2024 个人博客系统</p>
</footer>

<!-- 上传动态模态框 -->
<div id="uploadModal" class="upload-modal">
    <div class="upload-modal-content">
        <span class="close-modal" id="closeModal">&times;</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">&times;</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

<!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>&copy; 2024 个人博客系统</p>
</footer>


<!-- 上传图片模态框 -->
<div id="uploadModal" class="upload-modal">
    <div class="upload-modal-content">
        <span class="close-modal" id="closeModal">&times;</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">&times;</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

<!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>&copy; 2024 个人博客系统</p>
</footer>

<!-- 上传文章模态框 -->
<div id="uploadModal" class="upload-modal">
    <div class="upload-modal-content">
        <span class="close-modal" id="closeModal">&times;</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">&times;</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">&times;</span>
        <div class="profile-info">
            <div class="profile-details">
              <p>可以填入自己的介绍信息</p>
            </div>
        </div>
    </div>
</div>
<script src="js/script.js"></script>
</body>
</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

<!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>&copy; 2024 个人博客系统</p>
</footer>



<!-- 上传音乐模态框 -->
<div id="uploadModal" class="upload-modal">
    <div class="upload-modal-content">
        <span class="close-modal" id="closeModal">&times;</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">&times;</span>
        <div class="profile-info">
            <div class="profile-details">
              <p>可以填入自己的介绍信息</p>
            </div>
        </div>
    </div>
</div>
<script src="js/music.js"></script>
</body>
</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>