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

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 @   财神给你送元宝  阅读(18)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示