<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 添加样式，可以根据需要进行调整 */
body {
font-family: Arial, sans-serif; /* 设置字体 */
background-color: #f0f0f0; /* 设置背景颜色 */
color: #333; /* 设置文字颜色 */
display: flex;
flex-direction: column; /* Set to column to stack elements vertically */
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chapter-list {
margin-bottom: 20px; /* 设置章节列表的外边距 */
}
.chapter-link {
display: block; /* 将章节链接显示为块元素，方便点击 */
margin-bottom: 5px; /* 设置章节链接之间的间距 */
}
</style>
</head>
<body>
<!-- 显示书籍标题 -->
<h1>{{ book_title1 }}</h1>
<!-- 遍历字典中的章节名和内容，并显示在页面上 -->
<div class="chapter-list">
{% for chapter_name, content in book2.items() %}
<div class="chapter-link" id="chapter{{ loop.index }}"
style="display: {% if loop.index == 1 %}block{% else %}none{% endif %}; overflow-y: scroll; max-height: 400px;">
<h3>{{ chapter_name }}</h3>
<p>{{ content }}</p>
</div>
{% endfor %}
</div>
<div class="Readpage pagedown">
<!-- 上一章按钮 -->
<button onclick="prevChapter()">上一章</button>
<!-- 更换背景颜色按钮 -->
<button onclick="changeBgColor()">更换背景颜色</button>
<!-- 目录按钮 -->
<button onclick="mulu()">目录</button>
<!-- 更换字体按钮 -->
<button onclick="changeFont()">更换字体</button>
<!-- 下一章按钮 -->
<button onclick="nextChapter()">下一章</button>
</div>
<script>
// JavaScript 代码段
var currentChapter = 1; // 当前章节
function nextChapter() {
var currentChapterDiv = document.getElementById('chapter' + currentChapter);
currentChapterDiv.style.display = 'none'; // 隐藏当前章节内容
currentChapter++; // 更新当前章节
var nextChapterDiv = document.getElementById('chapter' + currentChapter);
if (nextChapterDiv) {
nextChapterDiv.style.display = 'block'; // 显示下一章节内容
} else {
currentChapter--; // 如果已经到达最后一章，则恢复当前章节为最后一章
}
}
function prevChapter() {
var currentChapterDiv = document.getElementById('chapter' + currentChapter);
currentChapterDiv.style.display = 'none'; // 隐藏当前章节内容
currentChapter--; // 更新当前章节
var prevChapterDiv = document.getElementById('chapter' + currentChapter);
if (prevChapterDiv) {
prevChapterDiv.style.display = 'block'; // 显示上一章节内容
} else {
currentChapter++; // 如果已经到达第一章，则恢复当前章节为第一章
}
}
// 更换背景颜色功能
function changeBgColor() {
var body = document.body; // 获取<body>元素
var colors = ['#ffffff', '#000000', '#00ff00']; // 定义背景颜色数组，分别是纯白、纯黑和纯绿
var randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机选择一个颜色
body.style.backgroundColor = randomColor; // 设置背景颜色
}
// 更换字体功能
function changeFont() {
var body = document.body; // 获取<body>元素
var fonts = ['宋体, SimSun', '楷体, KaiTi', '行书, STXingkai']; // 定义字体样式数组
var randomFont = fonts[Math.floor(Math.random() * fonts.length)]; // 随机选择一个字体样式
body.style.fontFamily = randomFont; // 设置字体样式
}
function mulu() {
var chapters = document.querySelectorAll('.chapter-link');
chapters.forEach(function (chapter) {
chapter.style.display = 'block'; // 显示所有章节名称
chapter.querySelector('p').style.display = 'none'; // 隐藏章节内容
chapter.addEventListener('click', function () {
var chapterIndex = parseInt(this.id.match(/\d+/)[0]); // 获取点击的章节索引
showChapter(chapterIndex); // 调用显示章节内容的函数
});
});
}
function showChapter(chapterIndex) {
var chapters = document.querySelectorAll('.chapter-link');
chapters.forEach(function (chapter) {
var index = parseInt(chapter.id.match(/\d+/)[0]);
if (index === chapterIndex) {
chapter.style.display = 'block'; // 显示当前章节名称
chapter.querySelector('p').style.display = 'block'; // 显示当前章节内容
} else {
chapter.style.display = 'none'; // 隐藏其他章节
chapter.querySelector('p').style.display = 'none'; // 隐藏其他章节内容
}
});
}
</script>
</body>
</html>
