增补博客 第十五篇 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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步