2025.3.17

html:

<header>
    <h1>欢迎来到我的博客</h1>
    <!-- 主题切换按钮 -->
    <button id="theme-toggle">切换主题</button>
</header>

<section id="about-me">
    <h2>关于我</h2>
    <p>你好！我是一个热爱编程和技术的学生，目前正在不断学习和进步。希望在这个博客中分享我的学习旅程和心得。</p>
</section>

<section id="skills">
    <h2>我的技能</h2>
    <ul>
        <li>HTML & CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>C++</li>
        <li>React</li>
        <li>MySQL</li>
    </ul>
</section>

<section id="schedule">
    <h2>我的时间表</h2>
    <table>
        <tr>
            <th>时间</th>
            <th>任务</th>
        </tr>
        <tr>
            <td>8:00 AM - 9:00 AM</td>
            <td>早晨复习编程</td>
        </tr>
        <tr>
            <td>9:30 AM - 12:00 PM</td>
            <td>学习数据结构</td>
        </tr>
        <tr>
            <td>1:00 PM - 3:00 PM</td>
            <td>阅读技术文章</td>
        </tr>
        <tr>
            <td>3:30 PM - 6:00 PM</td>
            <td>编写代码练习</td>
        </tr>
    </table>
</section>

<section id="contact">
    <h2>联系我</h2>
    <form id="comment-form" action="#" method="POST">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <span id="name-error" class="error"></span>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required>
        <span id="email-error" class="error"></span>

        <label for="message">消息:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
        <span id="message-error" class="error"></span>

        <button type="submit">提交</button>
    </form>
</section>

<script src="script.js"></script>

css:/* 基础样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #e3f2fd; color: #333; transition: background-color 0.3s ease, color 0.3s ease; }

header {
background-color: #3f51b5;
color: white;
text-align: center;
padding: 2em 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}

section {
background-color: #ffffff;
margin: 20px auto;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 800px;
transition: background-color 0.3s ease, color 0.3s ease;
}

h2 {
color: #3f51b5;
border-bottom: 2px solid #3f51b5;
padding-bottom: 5px;
margin-bottom: 15px;
transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

ul {
list-style: none;
padding: 0;
}

li {
background-color: #f1f8e9;
margin: 5px 0;
padding: 10px;
border-left: 5px solid #4caf50;
border-radius: 4px;
transition: background-color 0.3s ease, border-left-color 0.3s ease;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}

th {
background-color: #4caf50;
color: white;
transition: background-color 0.3s ease;
}

form {
display: flex;
flex-direction: column;
}

input, textarea {
margin-bottom: 10px;
padding: 12px;
border: 2px solid #3f51b5;
border-radius: 8px;
transition: border-color 0.3s ease;
}

button {
background-color: #4caf50;
color: white;
padding: 12px;
font-size: 1.1em;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background-color: #45a049;
}

.error {
color: red;
font-size: 0.8em;
margin-bottom: 10px;
}

/* 进度条样式 */

progress-bar {

position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(to right, #3f51b5, #9c27b0);
width: 0%;
z-index: 1000;
transition: width 0.2s ease;

}

/* 黑夜模式样式 */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}

header.dark-mode {
background-color: #1e1e1e;
}

section.dark-mode {
background-color: #2d2d2d;
color: #ffffff;
}

h2.dark-mode {
color: #bb86fc;
border-bottom-color: #bb86fc;
}

li.dark-mode {
background-color: #333333;
border-left-color: #03dac6;
}

th.dark-mode {
background-color: #03dac6;
color: #000000;
}

button.dark-mode {
background-color: #03dac6;
color: #000000;
}

button.dark-mode:hover {
background-color: #018786;
}
js:
// 文章阅读进度条
window.onscroll = function() {
updateProgressBar();
};

function updateProgressBar() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("progress-bar").style.width = scrolled + "%";
}

// 主题切换功能
document.getElementById("theme-toggle").addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
document.querySelector("header").classList.toggle("dark-mode");
document.querySelectorAll("section").forEach(section => section.classList.toggle("dark-mode"));
document.querySelectorAll("h2").forEach(h2 => h2.classList.toggle("dark-mode"));
document.querySelectorAll("li").forEach(li => li.classList.toggle("dark-mode"));
document.querySelectorAll("th").forEach(th => th.classList.toggle("dark-mode"));
document.querySelectorAll("button").forEach(button => button.classList.toggle("dark-mode"));
});

// 评论表单验证
document.getElementById("comment-form").addEventListener("submit", function(event) {
let valid = true;

const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const message = document.getElementById("message").value;

if (name.trim() === "") {
    document.getElementById("name-error").textContent = "姓名不能为空";
    valid = false;
} else {
    document.getElementById("name-error").textContent = "";
}

if (!email.includes("@") || !email.includes(".")) {
    document.getElementById("email-error").textContent = "邮箱格式不正确";
    valid = false;
} else {
    document.getElementById("email-error").textContent = "";
}

if (message.length < 10) {
    document.getElementById("message-error").textContent = "评论内容至少10个字符";
    valid = false;
} else {
    document.getElementById("message-error").textContent = "";
}

if (!valid) {
    event.preventDefault();
}

});