2025.3.17

html:

欢迎来到我的博客

切换主题

关于我

你好！我是一个热爱编程和技术的学生，目前正在不断学习和进步。希望在这个博客中分享我的学习旅程和心得。

我的技能

• HTML & CSS


• JavaScript


• Python


• C++


• React


• MySQL

我的时间表

时间	任务
8:00 AM - 9:00 AM	早晨复习编程
9:30 AM - 12:00 PM	学习数据结构
1:00 PM - 3:00 PM	阅读技术文章
3:30 PM - 6:00 PM	编写代码练习

联系我

姓名:

电子邮件:

消息:

提交

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