用javascript优化页面
核心功能要求
1.文章阅读进度条
·在页面顶部添加横向进度条，实时显示当前文章的阅读进度·进度条颜色渐变(如从蓝色到紫色)
·滚动到页面底部时进度条填满
2.主题切换功能
·在导航栏添加“白天/黑夜模式”切换按钮
·点击按钮时切换全局配色方案
3.评论表单验证
·用户提交评论时验证:
·姓名不能为空
·邮箱格式正确(包含@和.) ·评论内容至少10个字符
·验证失败时在对应输入框下方显示红色错误提示
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="博客主页.css">
<title>博客主页</title>
<style>
/* 白天模式 */
body.day-mode {
background-color: #ffffff;
color: #000000;
}
/* 黑夜模式 */
body.night-mode {
background-color: #1a1a1a;
color: #ffffff;
}
/* 导航栏样式 */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(248, 249, 250, 0.9);
}
/* 页面内容顶部间距 */
body {
padding-top: 60px;
}
/* 进度条样式 */
#progress-bar {
position: fixed;
top: 50px;
left: 0;
height: 5px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
width: 0%;
z-index: 1000;
transition: width 0.2s ease;
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
td {
background-color: #fff;
}
/* 黑夜模式下的表格样式 */
body.night-mode th {
background-color: #333;
color: #fff;
}
body.night-mode td {
background-color: #444;
color: #fff;
}
/* 表单样式 */
form {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 黑夜模式下的表单样式 */
body.night-mode form {
background-color: #333;
color: #ffffff;
border: 1px solid #555;
}
body.night-mode label {
color: #ffffff;
}
body.night-mode input,
body.night-mode textarea {
background-color: #444;
color: #ffffff;
border: 1px solid #666;
}
body.night-mode input::placeholder,
body.night-mode textarea::placeholder {
color: #bbb;
}
body.night-mode button {
background-color: #555;
color: #ffffff;
border: 1px solid #666;
}
body.night-mode button:hover {
background-color: #666;
}
/* 侧边栏样式 */
/* 侧边栏样式 */
#sidebar {
position: fixed;
top: 80px;
right: 20px; /* 固定在右侧 */
width: 200px;
background-color: rgba(248, 249, 250, 0.9);
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 999;
}
/* 黑夜模式下的侧边栏样式 */
body.night-mode #sidebar {
background-color: rgba(51, 51, 51, 0.9);
color: #ffffff;
}
</style>
</head>
<body class="day-mode">
<!-- 侧边栏目录 -->
<aside id="sidebar">
<ul id="toc"></ul>
</aside>
<nav>
<button id="mode-toggle" style="padding: 5px 10px; font-size: 16px; cursor: pointer;">
切换到黑夜模式
</button>
</nav>
<div id="progress-bar"></div>
<h2 style="color: rgb(53, 51, 134);font-family: 'Courier New', Courier, monospace;font-size: 35px;font-family: '楷体', 'KaiTi', serif;">关于我</h2>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;font-family: '楷体', 'KaiTi', serif;"><b>姓名：</b>刘胡伟</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;font-family: '楷体', 'KaiTi', serif;"><b>年龄：</b>19</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;font-family: '楷体', 'KaiTi', serif;"><b>身高/体重：</b>1.72m/55kg</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;font-family: '楷体', 'KaiTi', serif;"><b>专业：</b>软件工程</p>
<p style="color: rgb(63, 63, 139);font-family: 'Courier New', Courier, monospace;font-size: 25px;font-family: '楷体', 'KaiTi', serif;"><b>职业：</b>资深乒乓球教练</p>
<h2 style="color: rgba(42, 14, 70, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;font-family: '楷体', 'KaiTi', serif;">技能模块</h2>
<ul>
<li style="color: rgba(66, 35, 96, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;font-family: '楷体', 'KaiTi', serif;">乒乓球，GOAT：马龙、樊振东、林高远</li>
<img src="img/1.jpg" width="304" height="150">
<li style="color: rgba(66, 35, 96, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;font-family: '楷体', 'KaiTi', serif;">web</li>
</ul>
<h2 style="color: rgba(75, 19, 86, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;font-family: '楷体', 'KaiTi', serif;">时间表模块</h2>
<table>
<!-- 表头：星期 -->
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<!-- 表体：课程信息 -->
<tbody>
<!-- 第一行：日期 -->
<tr>
<td>日期</td>
<td>02-17</td>
<td>02-18</td>
<td>02-19</td>
<td>02-20</td>
<td>02-21</td>
<td>02-22</td>
<td>02-23</td>
</tr>
<!-- 第二行：课程1 -->
<tr>
<td>08:00-09:40</td>
<td>WEB应用开发技术</td>
<td>Python程序设计</td>
<td></td>
<td>概率论与数理统计</td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第三行：课程2 -->
<tr>
<td>10:00-11:40</td>
<td></td>
<td>数据库原理</td>
<td>计算机网络</td>
<td></td>
<td>高级英语</td>
<td></td>
<td></td>
</tr>
<!-- 第四行：课程3 -->
<tr>
<td>14:00-15:40</td>
<td>体育IV</td>
<td></td>
<td>软件工程</td>
<td></td>
<td>毛概</td>
<td></td>
<td></td>
</tr>
<!-- 第五行：课程4 -->
<tr>
<td>16:00-17:40</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h2 style="color: rgba(102, 21, 118, 0.815);font-family: 'Courier New', Courier, monospace;font-size: 35px;">联系我模块</h2>
<form id="contact-form" action="/博客主页.html" method="POST" style="width: 80%; margin: 20px auto; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);font-family: '楷体', 'KaiTi', serif;">
<label for="name" style="font-size: 20px; margin-bottom: 10px; display: block;font-family: '楷体', 'KaiTi', serif;">名称：</label>
<input type="text" id="name" name="name" required style="width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;font-family: '楷体', 'KaiTi', serif;">
<span id="name-error" style="color: red; font-size: 14px; display: none;">姓名不能为空</span>
<label for="email" style="font-size: 20px; margin-bottom: 10px; display: block;font-family: '楷体', 'KaiTi', serif;">电子邮件：</label>
<input type="email" id="email" name="email" placeholder="请输入电子邮件" required style="width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;font-family: '楷体', 'KaiTi', serif;">
<span id="email-error" style="color: red; font-size: 14px; display: none;">请输入有效的电子邮件地址</span>
<label for="message" style="font-size: 20px; margin-bottom: 10px; display: block;font-family: '楷体', 'KaiTi', serif;">消息：</label>
<textarea id="message" name="message" rows="5" placeholder="请输入您的消息" required style="width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px;font-family: '楷体', 'KaiTi', serif;"></textarea>
<span id="message-error" style="color: red; font-size: 14px; display: none;">评论内容不能少于10个字符</span>
<button type="submit" style="background-color: rgb(53, 51, 134); color: white; font-size: 20px; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%;font-family: '楷体', 'KaiTi', serif;">提交</button>
</form>
<script>
// 获取模式切换按钮
const modeToggle = document.getElementById('mode-toggle');
// 检查本地存储中是否保存了模式设置
const currentMode = localStorage.getItem('mode') || 'day-mode';
document.body.classList.add(currentMode);
updateButtonText();
// 切换模式
modeToggle.addEventListener('click', () => {
if (document.body.classList.contains('day-mode')) {
document.body.classList.remove('day-mode');
document.body.classList.add('night-mode');
localStorage.setItem('mode', 'night-mode');
} else {
document.body.classList.remove('night-mode');
document.body.classList.add('day-mode');
localStorage.setItem('mode', 'day-mode');
}
updateButtonText();
});
// 更新按钮文本
function updateButtonText() {
if (document.body.classList.contains('day-mode')) {
modeToggle.textContent = '切换到黑夜模式';
} else {
modeToggle.textContent = '切换到白天模式';
}
}
// 进度条逻辑
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('contact-form').addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取输入值
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const message = document.getElementById('message').value.trim();
// 获取错误提示元素
const nameError = document.getElementById('name-error');
const emailError = document.getElementById('email-error');
const messageError = document.getElementById('message-error');
// 验证姓名
if (name === '') {
nameError.style.display = 'block';
} else {
nameError.style.display = 'none';
}
// 验证邮箱格式
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
emailError.style.display = 'block';
} else {
emailError.style.display = 'none';
}
// 验证评论内容
if (message.length < 10) {
messageError.style.display = 'block';
} else {
messageError.style.display = 'none';
}
// 如果所有验证通过，提交表单
if (name !== '' && emailPattern.test(email) && message.length >= 10) {
alert('表单提交成功！');
this.submit(); // 提交表单
}
});
// 生成目录
function generateTOC() {
const headings = document.querySelectorAll('h2'); // 获取所有 <h2> 标题
const toc = document.getElementById('toc'); // 获取目录容器
headings.forEach((heading, index) => {
// 为每个标题添加唯一的 ID
const id = `section-${index}`;
heading.setAttribute('id', id);
// 创建目录项
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#${id}`;
a.textContent = heading.textContent;
a.addEventListener('click', (e) => {
e.preventDefault(); // 阻止默认跳转行为
smoothScroll(id); // 平滑滚动到对应章节
});
li.appendChild(a);
toc.appendChild(li);
});
}
// 平滑滚动函数
function smoothScroll(targetId) {
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到目标元素的顶部
});
}
}
// 页面加载完成后生成目录
window.onload = function () {
generateTOC();
};
</script>
</body>
</html>
浙公网安备 33010602011771号