增补博客 第十五篇 python大作业小说阅读器（4）html页面

合集 - python(25)
1.增补博客 第二篇 python 谢宾斯基三角型字符分形图形输出2.增补博客 第三篇 python 英文统计3.增补博客 第四篇 python 中文级联菜单4.增补博客 第五篇 python 电子算盘5.增补博客 第六篇 python 电子算盘6.增补博客 第七篇 python 比较不同Python图形处理库或图像处理库的异同点7.增补博客 第八篇 python 中国大学排名数据分析与可视化8.增补博客 第九篇 python 图书评论数据分析与可视化9.增补博客 第十篇 python 函数图形绘制10.增补博客 第十一篇 python 分段函数图形绘制11.增补博客 第十二篇 python大作业小说阅读器（1）爬取12.增补博客 第十三篇 python大作业小说阅读器（2）爬取13.增补博客 第十四篇 python大作业小说阅读器（3）显示文字函数
14.增补博客 第十五篇 python大作业小说阅读器（4）html页面
15.增补博客 第十七篇 python 模拟页面调度LRU算法16.增补博客 第十八篇 python 杨辉三角形17.增补博客 第二十篇 python 筛法求素数18.增补博客 第二十一篇 python 查找鞍点19.增补博客 第二十四篇 python 正整数的因子展开式20.增补博客 第二十二篇 python 牛顿迭代法21.增补博客 第二十三篇 python 对比Python中的列表、元组、字典、集合、字符串等之间异同22.增补博客 第十九篇 python 爬楼梯23.增补博客 第一篇 python 简易带参计算器24.增补博客 第十六篇 python 排列组合序列25.增补博客 第二十五篇 python 列举说明Python同Java及C++的不同之处
收起
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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>

　　

posted @   财神给你送元宝  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
· 增补博客 第十四篇 python大作业小说阅读器（3）显示文字函数
· 增补博客 第十二篇 python大作业小说阅读器（1）爬取
· 框架第十三天周总结-----图书管理系统代码优化，加分页器，加了用户注册，登录，退出登录，登录成功自动显示登录用户的用户名等功能
· 用Python做一个小说下载器，从获取数据到编写GUI界面
· 第四作业（1）
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示