增補部落格 第十五篇 python大作業小說閱讀器（4）html頁面

财神给你送元宝發表於2024-06-14
PythonHTML
<!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>

　　

相關文章