极简阅读体验,统一布局与样式,支持多主题配色和字体调整
< Feedback on 晋江文学城极简阅读页面
感谢您的脚本,非常好用!我借助ai在此基础上加入了评论区的显示(这对我很重要)然后顶部的元素稍微用flex布局调整了元素的位置,不会移位了。我也留下代码供后来者使用:(function() { 'use strict'; // 添加CSS样式 const style = document.createElement('style'); style.textContent = ` /* 全局重置 */ /* 强力重置所有原站点样式 */ html, body { background-color: #f8f9fa !important; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; color: #333 !important; line-height: 1.8 !important; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; padding: 0 !important; margin: 0 !important; width: 100% !important; overflow-x: hidden !important; } /* 彻底重置所有元素 */ * { box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; font-family: inherit !important; } /* 重置所有默认边距 */ div, p, h1, h2, h3, h4, h5, span, table, tr, td, a, font { margin: 0 !important; padding: 0 !important; border: none !important; line-height: inherit !important; color: inherit !important; } /* ==================== 隐藏原始元素 ==================== */ /* 隐藏通用元素 */ #oneboolt, .noveltitle:not(.jj-novel-header), .novelbody:not(.jj-novel-content), .noveltext:not(.jj-novel-content), .readtitle:not(.jj-novel-header), .readtd:not(.jj-novel-content), table[width="984"], table[width="100%"], #comment_list, #publishcomment, td:has(> #comment_list), .readcontrolbar, .uninterested-hide, .danmu, .danmu_row, #danmu_main, .danmu_total_str, marquee, iframe, #qrCodeDiv, #footer, div#footer, body > div#footer, [style*="z-index:333333"], div.footer, .copyright, #copyright, .bottomlinks, #sitebottom, div[class*="footer"], div[align="center"]:has(> table):nth-last-of-type(-n+2) { display: none !important; } /* 隐藏书签和收藏相关元素 */ div[align="right"]:has(> div[style*="float:right"]), div[style*="float:right"][style*="height: 25px"], div:has(> img[src*="bookmark.gif"]), img[src*="bookmark.gif"], span.favorite_novel, span[id*="favorite_"], span[id="report_action"], span[id="yrt3"], div[style*="width: 100%; text-align: center"]:has(span[id*="favorite_"]), div[style*="width: 100%; text-align: center"]:has(span[id="report_action"]), div[id="float_favorite"], div[id="mongolia_layer"], div[id="report_box"], div[id*="favoriteshow_"], span[id="chapterJurisdiction"], font[color="#009900"]:has(> span.favorite_novel), div.float_favorite, a[href*="freegold"], button[onclick*="FavoriteClass"], div[class*="addFavoritClass"] { display: none !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* 隐藏原始返回顶部按钮 */ a[href="#top"], a[href="javascript:scroll(0,0)"], a[onclick*="scroll(0,0)"], #jj-top-link, a[id="booktext_top"], [onclick*="window.scrollTo"], a[href^="javascript"][onclick*="window.scroll"], div[style*="position: fixed"][style*="right:"][style*="bottom:"][style*="cursor: pointer"]:not(.back-to-top), div[style*="width: 18px"][style*="line-height: 1.2"][style*="position: fixed"][style*="right: 10px"], div[style*="background-color: rgb(0, 0, 0)"][style*="position: fixed"][title="返回顶部"] { display: none !important; pointer-events: none !important; } /* 正文容器 */ .jj-container { max-width: 800px !important; margin: 20px auto !important; padding: 0 !important; background-color: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; border-radius: 8px !important; overflow: hidden !important; } /* 小说标题区域 - 单行布局 */ .jj-novel-header { padding: 15px 40px !important; text-align: left !important; border-bottom: 1px solid #E0E0E0 !important; display: flex !important; align-items: center !important; gap: 15px !important; } /* 小说标题 */ .jj-novel-title { font-size: 18px !important; font-weight: 700 !important; color: #222 !important; margin: 0 !important; flex-shrink: 0 !important; } /* 作者信息 */ .jj-novel-author { font-size: 18px !important; color: #666 !important; margin: 0 !important; flex-shrink: 0 !important; } /* 正文内容区域 - 局左排版 */ .jj-novel-content { padding: 35px 40px !important; text-align: left !important; } /* 章节导航区域 - 居中 */ .jj-chapter-nav { padding: 25px 0 !important; text-align: center !important; border-top: 1px solid #E0E0E0 !important; } /* ==================== 元素样式 ==================== */ /* 正文段落 */ .jj-novel-content p { margin: 1em 0 !important; text-indent: 2em !important; font-size: 18px !important; line-height: 2 !important; color: #2c3e50 !important; letter-spacing: 0.02em !important; } /* 作者有话说基础样式 */ .jj-author-note, #note_danmu_wrapper, .note_main, .note_content { margin: 20px 0 !important; padding: 20px 25px !important; border-radius: 8px !important; font-size: 16px !important; line-height: 1.7 !important; transition: all 0.3s ease !important; } /* 默认主题作者有话说 */ .theme-default .jj-author-note, .theme-default #note_danmu_wrapper, .theme-default .note_main, .theme-default .note_content { background-color: #E5E5E5 !important; color: #333333 !important; border: 1px solid #D8D8D8 !important; } /* 护眼主题作者有话说 */ .theme-eye-care .jj-author-note, .theme-eye-care #note_danmu_wrapper, .theme-eye-care .note_main, .theme-eye-care .note_content { background-color: #D8E5C0 !important; color: #2C3E50 !important; border: 1px solid #C5D4A9 !important; } /* 专注主题作者有话说 */ .theme-focus .jj-author-note, .theme-focus #note_danmu_wrapper, .theme-focus .note_main, .theme-focus .note_content { background-color: #F5ECD8 !important; color: #3C3C3C !important; border: 1px solid #E6D5B8 !important; } /* 夜间主题作者有话说 */ .theme-dark .jj-author-note, .theme-dark #note_danmu_wrapper, .theme-dark .note_main, .theme-dark .note_content { background-color: #2D2D30 !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* 导航链接 */ .jj-nav-link { display: inline-block !important; margin: 0 15px !important; padding: 10px 20px !important; background-color: #f8f9fa !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; color: #444 !important; font-size: 15px !important; transition: all 0.3s ease !important; text-decoration: none !important; } .jj-nav-link:hover { background-color: #e8f0fe !important; color: #0d66d0 !important; border-color: #c0d7fe !important; } /* 章节选择下拉列表 */ .jj-chapter-select { display: inline-block !important; margin: 0 15px !important; padding: 10px 15px !important; background-color: #f8f9fa !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; color: #444 !important; font-size: 15px !important; transition: all 0.3s ease !important; cursor: pointer !important; min-width: 150px !important; text-align: center !important; outline: none !important; appearance: auto !important; -webkit-appearance: auto !important; } .jj-chapter-select:hover, .jj-chapter-select:focus { background-color: #e8f0fe !important; color: #0d66d0 !important; border-color: #c0d7fe !important; } /* 顶部导航栏样式 */ #sitetop { position: relative !important; background-color: #fff !important; border-bottom: 1px solid #eee !important; padding: 8px 20px !important; font-size: 14px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important; z-index: 1001 !important; width: 100% !important; box-sizing: border-box !important; } /* 左侧时间显示 */ #sitetop #serverTime { color: #666 !important; font-size: 13px !important; } /* 右侧导航菜单 */ #sitetop .top_right #t_user_signin a{ color:#fff!important; } #sitetop .toplogin { float: right !important; } #sitetop .toplogin .top_right{ display: flex; justify-content: center; align-items: center; gap: 0 10px; } #t_user_sms{ display:none; } ul.cssMenu li:hover > a > span ,ul.cssMenu span{ background-image: none!important; } #sitetop #t_user_nav .cssMenu ul a{ font-size:12px!important; display: flex!important; align-items: center; } #sitetop .cssMenu ul a:hover { background-color: #ff5925 !important; } #sitetop .top_right .cssMenu > li > a:hover{ color:#fff!important;} /* 用户信息样式 */ #sitetop #t_user_info { display: inline-block !important; margin-right: 15px !important; } #sitetop #t_user_info strong { font-weight: normal !important; } #sitetop #t_user_info a { color: #333 !important; text-decoration: none !important; transition: color 0.2s ease !important; } #sitetop #t_user_info a:hover { color: #1e88e5 !important; } /* 导航菜单样式 */ #sitetop .cssMenu { margin: 0 !important; padding: 0 !important; list-style: none !important; display: inline-flex !important; align-items: center !important; gap: 15px !important; } #sitetop .cssMenu > li { position: relative !important; display: inline-block !important; } #sitetop .cssMenu > li > a { color: #333 !important; text-decoration: none !important; padding: 5px 8px !important; display: inline-block !important; transition: color 0.2s ease !important; } #sitetop .cssMenu > li > a:hover { color: #1e88e5 !important; } /* 下拉菜单样式 */ #sitetop .cssMenu ul { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; background: #fff !important; border: 1px solid #eee !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; min-width: 150px !important; padding: 5px 0 !important; z-index: 1002 !important; } #sitetop .cssMenu li:hover > ul { display: block !important; } #sitetop .cssMenu ul li { display: block !important; } #sitetop .cssMenu ul a { color: #333 !important; text-decoration: none !important; padding: 8px 15px !important; display: block !important; transition: all 0.2s ease !important; font-size: 13px !important; } #sitetop .cssMenu ul a:hover { background-color: #f5f5f5 !important; color: #1e88e5 !important; } /* 签到按钮样式 */ #sitetop #t_user_signin a { background:#ff5925 !important; color: #ff5925 !important; text-decoration: none !important; padding: 2px 6px !important; border: 1px solid #ff5925 !important; border-radius: 2px !important; font-size: 13px !important; transition: all 0.2s ease !important; } #sitetop #t_user_signin a:hover { background-color: #ff5925 !important; color: #fff !important; } /* 客户号样式 */ #sitetop .readerid { color: #666 !important; font-size: 13px !important; margin-left: 5px !important; } #sitetop .readerid a { color: #666 !important; text-decoration: none !important; } #sitetop .readerid img { vertical-align: middle !important; cursor: pointer !important; } /* 夜间模式适配 */ .theme-dark #sitetop { background-color: #2D2D30 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; } .theme-dark #sitetop a, .theme-dark #sitetop #serverTime, .theme-dark #sitetop .readerid, .theme-dark #sitetop #t_user_info strong { color: #fff !important; } .theme-dark #sitetop .cssMenu ul { background-color: #2D2D30 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .theme-dark #sitetop .cssMenu ul a:hover { background-color: #4A4A4D !important; } /* 返回顶部按钮 */ .back-to-top { position: fixed !important; bottom: 30px !important; right: 30px !important; width: 40px !important; height: 40px !important; background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; color: #666 !important; text-align: center !important; border-radius: 50% !important; cursor: pointer !important; z-index: 9999 !important; font-size: 20px !important; line-height: 40px !important; transition: all 0.2s ease !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .back-to-top:hover { transform: scale(1.05) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; }/* 工具栏触发按钮 */.jj-toolbar-trigger { position: fixed !important; top: 50% !important; right: 30px !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 50% !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; cursor: pointer !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; color: #666666 !important;}.jj-toolbar-trigger:hover { background-color: rgba(255, 255, 255, 1) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important; color: #333333 !important;}/* 夜间模式适配 */.theme-dark .jj-toolbar-trigger { background-color: rgba(74, 74, 77, 0.95) !important; color: rgba(255, 255, 255, 0.8) !important;}.theme-dark .jj-toolbar-trigger:hover { background-color: rgba(74, 74, 77, 1) !important; color: rgba(255, 255, 255, 1) !important;} /* 主题设置工具栏 */ .jj-toolbar { position: fixed !important; top: 50% !important; right: 80px !important; transform: translateY(-50%) !important; width: 240px !important; display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 15px !important; background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 12px !important; z-index: 9998 !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; opacity: 0 !important; visibility: hidden !important; transform: translate(10px, -50%) !important; } .jj-toolbar.expanded { opacity: 1 !important; visibility: visible !important; transform: translate(0, -50%) !important; } .jj-toolbar-trigger svg { width: 24px !important; height: 24px !important; fill: #666 !important; transition: transform 0.3s ease !important; } /* 字体选择组样式 */ .jj-font-family-group { display: flex !important; gap: 6px !important; padding: 10px !important; background-color: rgba(0, 0, 0, 0.06) !important; border-radius: 6px !important; } .jj-font-family-btn { flex: 1 !important; padding: 6px 12px !important; border: none !important; background: none !important; color: #666 !important; cursor: pointer !important; font-size: 14px !important; border-radius: 4px !important; transition: all 0.2s ease !important; position: relative !important; } .jj-font-family-btn[data-font*="PingFang"] { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei" !important; } .jj-font-family-btn[data-font*="Songti"] { font-family: "Songti SC", SimSun, "宋体" !important; } .jj-font-family-btn:hover { color: #333 !important; background: rgba(0, 0, 0, 0.05) !important; } .jj-font-family-btn.active { background: #fff !important; color: #333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; } /* 主题卡片网格布局 */ .jj-theme-group { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; padding: 8px !important; background-color: rgba(0, 0, 0, 0.03) !important; border-radius: 8px !important; } /* 主题卡片 */ .jj-theme-card { position: relative !important; aspect-ratio: 16/9 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.2s ease !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 500 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } .jj-theme-card.active { border: 2px solid #1e88e5 !important; } .jj-theme-card:hover { border-color: #1e88e5 !important; } /* 主题预览 */ .jj-theme-preview { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 2px !important; padding: 6px !important; box-sizing: border-box !important; } /* 预览文本 */ .jj-theme-preview .preview-text { font-size: 13px !important; font-weight: 500 !important; } .jj-theme-preview .preview-name { font-size: 11px !important; font-weight: normal !important; opacity: 0.8 !important; } /* 默认主题预览 */ .jj-theme-preview.default { background-color: #EEEDED !important; color: #333333 !important; } /* 护眼主题预览 */ .jj-theme-preview.eye-care { background-color: #E6EFD5 !important; color: #2C3E50 !important; } /* 专注主题预览 */ .jj-theme-preview.focus { background-color: #FFFCF4 !important; color: #3C3C3C !important; } /* 夜间主题预览 */ .jj-theme-preview.dark { background-color: #4A4A4D !important; color: #FFFFFF !important; } /* 工具栏标题 */ .jj-toolbar-title { font-size: 14px !important; font-weight: 500 !important; color: #333 !important; margin-bottom: 5px !important; text-align: center !important; } /* 字体大小调整组 */ .jj-font-size-group { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 10px !important; background-color: rgba(0, 0, 0, 0.03) !important; border-radius: 8px !important; } /* 字体大小按钮组 */ .jj-font-size-buttons { display: flex !important; align-items: center !important; background: rgba(0, 0, 0, 0.06) !important; border-radius: 6px !important; padding: 2px !important; } /* 字体大小按钮 */ .jj-font-size-btn { flex: 1 !important; padding: 6px 12px !important; border: none !important; background: none !important; color: #666 !important; cursor: pointer !important; font-size: 14px !important; border-radius: 4px !important; transition: all 0.2s ease !important; position: relative !important; } .jj-font-size-btn:hover { color: #333 !important; background: rgba(0, 0, 0, 0.05) !important; } .jj-font-size-btn.active { background: #fff !important; color: #333 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; } /* 字体大小进度点 */ .jj-font-size-dots { display: flex !important; justify-content: center !important; gap: 4px !important; padding: 4px 0 !important; } .jj-font-size-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background-color: rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease !important; } .jj-font-size-dot.active { background-color: #1e88e5 !important; } /* 主题名称标签 */ .jj-theme-name { position: absolute !important; bottom: 8px !important; left: 8px !important; right: 8px !important; font-size: 12px !important; font-weight: 500 !important; text-align: center !important; padding: 4px 8px !important; border-radius: 4px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* 主题样式 */ /* 默认主题(纸张配色) */ .theme-default { background-color: #E5E5E5 !important; } .theme-default body { background-color: #E5E5E5 !important; } .theme-default .jj-container { background-color: #EEEDED !important; } .theme-default .jj-novel-content p, .theme-default .jj-novel-content div, .theme-default .jj-novel-content span, .theme-default .jj-novel-content font { color: #333333 !important; } .theme-default .jj-author-note { background-color: #E5E5E5 !important; border-left-color: #D8D8D8 !important; color: #333333 !important; } .theme-default .jj-nav-link { background-color: #E5E5E5 !important; border-color: #D8D8D8 !important; color: #444444 !important; } .theme-default .jj-nav-link:hover { background-color: #D8D8D8 !important; color: #222222 !important; } .theme-default .jj-novel-header { border-bottom-color: #D0D0D0 !important; } .theme-default .jj-chapter-nav { border-top-color: #D0D0D0 !important; } /* 护眼主题 */ .theme-eye-care { background-color: #D8E5C0 !important; } .theme-eye-care body { background-color: #D8E5C0 !important; } .theme-eye-care .jj-container { background-color: #E6EFD5 !important; } .theme-eye-care .jj-novel-content p, .theme-eye-care .jj-novel-content div, .theme-eye-care .jj-novel-content span, .theme-eye-care .jj-novel-content font { color: #2C3E50 !important; } .theme-eye-care .jj-author-note { background-color: #D8E5C0 !important; border-left-color: #C5D4A9 !important; color: #2C3E50 !important; } .theme-eye-care .jj-nav-link { background-color: #DCE5C9 !important; border-color: #C5D4A9 !important; color: #2C3E50 !important; } .theme-eye-care .jj-nav-link:hover { background-color: #C5D4A9 !important; color: #1B2E3F !important; } .theme-eye-care .jj-novel-header { border-bottom-color: #B8C7A0 !important; } .theme-eye-care .jj-chapter-nav { border-top-color: #B8C7A0 !important; } /* 专注主题 */ .theme-focus { background-color: #F5ECD8 !important; } .theme-focus body { background-color: #F5ECD8 !important; } .theme-focus .jj-container { background-color: #FFFCF4 !important; } .theme-focus .jj-novel-content p, .theme-focus .jj-novel-content div, .theme-focus .jj-novel-content span, .theme-focus .jj-novel-content font { color: #3C3C3C !important; } .theme-focus .jj-author-note { background-color: #F5ECD8 !important; border-left-color: #E6D5B8 !important; color: #3C3C3C !important; } .theme-focus .jj-nav-link { background-color: #FFF7E6 !important; border-color: #E6D5B8 !important; color: #3C3C3C !important; } .theme-focus .jj-nav-link:hover { background-color: #E6D5B8 !important; color: #2C2C2C !important; } .theme-focus .jj-novel-header { border-bottom-color: #D9C8A7 !important; } .theme-focus .jj-chapter-nav { border-top-color: #D9C8A7 !important; } /* 夜间主题 */ .theme-dark { background-color: #2D2D30 !important; } .theme-dark body { background-color: #2D2D30 !important; } .theme-dark .jj-container { background-color: #4A4A4D !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important; } .theme-dark .jj-novel-content p, .theme-dark .jj-novel-content div, .theme-dark .jj-novel-content span, .theme-dark .jj-novel-content font { color: #FFFFFF !important; } .theme-dark .jj-author-note { background-color: #2D2D30 !important; border-left-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .theme-dark .jj-nav-link { background-color: #5A5A5D !important; border-color: #666666 !important; color: #FFFFFF !important; } .theme-dark .jj-nav-link:hover { background-color: #666666 !important; color: #FFFFFF !important; } .theme-dark .jj-novel-title, .theme-dark .jj-novel-title a { color: #FFFFFF !important; } .theme-dark .jj-novel-author, .theme-dark .jj-novel-author a { color: #BBBBBB !important; } .theme-dark .jj-toolbar { background-color: rgba(74, 74, 77, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .theme-dark .jj-toolbar-title { color: #FFFFFF !important; } .theme-dark .jj-font-size-btn { color: #FFFFFF !important; } .theme-dark .jj-font-size-btn:hover { background: rgba(255, 255, 255, 0.1) !important; } .theme-dark .jj-font-size-dot { background-color: rgba(255, 255, 255, 0.2) !important; } .theme-dark .jj-font-size-dot.active { background-color: #FFFFFF !important; } .theme-dark .jj-chapter-select { background-color: #5A5A5D !important; border-color: #666666 !important; color: #FFFFFF !important; } .theme-dark .jj-chapter-select:hover { background-color: #666666 !important; } .theme-dark .jj-novel-header { border-bottom-color: rgba(255, 255, 255, 0.1) !important; } .theme-dark .jj-chapter-nav { border-top-color: rgba(255, 255, 255, 0.1) !important; } /* 评论区 */ .jj-comment-section { padding: 20px !important; border-top: 1px solid #e0e0e0 !important; } .jj-comment { margin-bottom: 10px !important; padding-bottom: 8px !important; border-bottom: 1px solid #f0f0f0 !important; } .jj-comment-time { font-size: 12px !important; color: #888 !important; margin-bottom: 4px !important; } .jj-comment-content { font-size: 14px !important; color: #333 !important; } #comment_list .readcontrolbar, #comment_list .agree_block, #comment_list .reply_submit, #comment_list .uninterested-reader, #comment_list .tdtitle > .coltext > a, #comment_list .blacktext, #comment_list .redcommentchapter { display: none !important; } `; document.head.appendChild(style); // 防抖函数 function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } // 页面加载后执行 window.addEventListener('load', function() { // 清理无关元素 function removeElements() { try { const selectors = [ 'div[style*="float:right"], img[src*="bookmark.gif"], span.favorite_novel', 'span[id*="favorite_"], span[id="report_action"], span[id="yrt3"]', 'div[id="float_favorite"], div[id="mongolia_layer"], div[id="report_box"]', 'div[id*="favoriteshow_"], span[id="chapterJurisdiction"], a[href*="freegold"]', 'button[onclick*="FavoriteClass"], div[class*="addFavoritClass"]', 'a[href="#top"], a[href="javascript:scroll(0,0)"], a[onclick*="scroll(0,0)"]' ].join(','); document.querySelectorAll(selectors).forEach(el => { if (!el.dataset.removed) { el.style.display = 'none'; el.dataset.removed = 'true'; } }); } catch (e) { console.log('removeElements error:', e); } } // 获取评论 function getComments() { const start = performance.now(); const comments = []; try { const commentElements = document.querySelectorAll('#comment_list > div[id^="comment_"]:not([data-processed])'); commentElements.forEach(comment => { const timeEl = comment.querySelector('.tdtitle .coltext'); const contentEl = comment.querySelector('.readbody span[id^="mormalcomment_"]'); const time = timeEl?.textContent.match(/发表时间:([^<]+)/)?.[1]?.trim(); const content = contentEl?.textContent?.trim(); if (time && content) { comments.push({ time, content }); comment.dataset.processed = 'true'; } }); } catch (e) { console.log('getComments error:', e); } console.log('getComments took:', performance.now() - start, 'ms'); return comments; } // 更新评论区 function updateCommentSection(container) { const start = performance.now(); try { let commentSection = container.querySelector('.jj-comment-section'); const comments = getComments(); if (comments.length) { if (!commentSection) { commentSection = document.createElement('div'); commentSection.className = 'jj-comment-section'; container.appendChild(commentSection); } commentSection.innerHTML = `
${comments.map(comment => `
`).join('')} `; } } catch (e) { console.log('updateCommentSection error:', e); } console.log('updateCommentSection took:', performance.now() - start, 'ms'); } // 创建页面布局 function createNewLayout() { const start = performance.now(); try { removeElements(); // 获取标题和作者 let novelTitle = '', novelAuthor = '', authorHref = '', novelHref = ''; const titleEl = document.querySelector('.noveltitle h1, .noveltitle h2, .readtitle h1, .readtitle h2'); if (titleEl) { const titleLink = titleEl.querySelector('a'); novelTitle = titleLink ? titleLink.textContent.trim() : titleEl.textContent.trim(); novelHref = titleLink ? titleLink.getAttribute('href') : ''; } if (!novelHref) { const match = window.location.href.match(/novelid=(\d+)/); if (match) novelHref = `http://www.jjwxc.net/onebook.php?novelid=${match[1]}`; } const authorSpan = Array.from(document.querySelectorAll('span')).find(s => s.textContent.includes('作者:')); if (authorSpan) { const authorLink = authorSpan.querySelector('a'); novelAuthor = authorLink ? authorLink.textContent.trim() : ''; authorHref = authorLink ? authorLink.getAttribute('href') : ''; } if (!novelAuthor) { const authorLink = document.querySelector('a[href*="oneauthor.php"]'); if (authorLink) { novelAuthor = authorLink.textContent.trim(); authorHref = authorLink.getAttribute('href'); } } // 获取正文 let contentHTML = ''; const contentEl = document.querySelector('.noveltext, .readtd, .novelbody[style*="grid-column:1"]:not(:has(div#copyrightlist))'); if (contentEl) { contentHTML = contentEl.innerHTML; const tempDiv = document.createElement('div'); tempDiv.innerHTML = contentHTML; tempDiv.querySelectorAll('div[style*="width: 100%; text-align: center"], div[style*="float:right"]').forEach(div => div.remove()); contentHTML = tempDiv.innerHTML; } // 获取导航 let prevLink = null, nextLink = null, tocLink = null; document.querySelectorAll('a[href*="onebook.php"]').forEach(link => { const text = link.textContent.trim(); if (text.includes('上一章')) prevLink = { href: link.getAttribute('href'), text }; else if (text.includes('下一章')) nextLink = { href: link.getAttribute('href'), text }; else if (text.includes('目录')) tocLink = { href: link.getAttribute('href'), text }; }); const chapterSelect = document.querySelector('#chapter_list') || Array.from(document.querySelectorAll('select')).find(s => Array.from(s.options).some(o => o.text.match(/第.*章|序章|楔子|尾声|番外/)) ); // 创建布局 const container = document.createElement('div'); container.className = 'jj-container'; const header = document.createElement('div'); header.className = 'jj-novel-header'; header.innerHTML = `
${novelAuthor ? `
` : ''} `; container.appendChild(header); const content = document.createElement('div'); content.className = 'jj-novel-content'; content.innerHTML = contentHTML; container.appendChild(content); const nav = document.createElement('div'); nav.className = 'jj-chapter-nav'; if (prevLink) nav.innerHTML += `${prevLink.text}`; if (chapterSelect) { chapterSelect.classList.add('jj-chapter-select'); nav.appendChild(chapterSelect); chapterSelect.addEventListener('change', () => chapterSelect.value && (window.location.href = chapterSelect.value)); } if (nextLink) nav.innerHTML += `${nextLink.text}`; if (tocLink && !chapterSelect) nav.innerHTML += `${tocLink.text}`; container.appendChild(nav); // 隐藏原有内容 document.querySelectorAll('body > *:not(#sitetop):not(style):not(script):not(.back-to-top):not(.jj-toolbar):not(.jj-toolbar-trigger)').forEach(el => { if (el !== container) el.style.display = 'none'; }); document.body.appendChild(container); updateCommentSection(container); // 监听评论区变化 const commentObserver = new MutationObserver(debounce(() => updateCommentSection(container), 300)); const commentList = document.querySelector('#comment_list'); if (commentList) { commentObserver.observe(commentList, { childList: true, subtree: true }); } createToolbar(); initializeSettings(); } catch (e) { console.log('createNewLayout error:', e); } console.log('createNewLayout took:', performance.now() - start, 'ms'); } // 主题切换 function setTheme(theme) { const start = performance.now(); try { document.body.classList.remove('theme-default', 'theme-eye-care', 'theme-focus', 'theme-dark'); document.body.classList.add(`theme-${theme}`); localStorage.setItem('jj-theme', theme); document.querySelectorAll('.jj-theme-card').forEach(card => { card.classList.toggle('active', card.dataset.theme === theme); }); } catch (e) { console.log('setTheme error:', e); } console.log('setTheme took:', performance.now() - start, 'ms'); } // 字体切换 function setFontFamily(fontFamily) { const start = performance.now(); try { const content = document.querySelector('.jj-novel-content'); if (content) { const textElements = content.querySelectorAll('p, div, span, font'); textElements.forEach(el => { el.style.setProperty('font-family', fontFamily, 'important'); }); } localStorage.setItem('jj-font-family', fontFamily); updateFontFamilyUI(fontFamily); } catch (e) { console.log('setFontFamily error:', e); } console.log('setFontFamily took:', performance.now() - start, 'ms'); } // 更新字体选择UI function updateFontFamilyUI(fontFamily) { try { document.querySelectorAll('.jj-font-family-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.font === fontFamily); }); } catch (e) { console.log('updateFontFamilyUI error:', e); } } // 字体大小调整 function adjustFontSize(delta) { const start = performance.now(); try { const content = document.querySelector('.jj-novel-content'); if (!content) return; let currentSize = parseInt(localStorage.getItem('jj-font-size')) || 16; const newSize = Math.min(Math.max(currentSize + delta * 2, 14), 24); const textElements = content.querySelectorAll('p, div, span, font'); textElements.forEach(el => { el.style.setProperty('font-size', `${newSize}px`, 'important'); el.style.setProperty('line-height', '1.8', 'important'); }); localStorage.setItem('jj-font-size', newSize); updateFontSizeUI(newSize); } catch (e) { console.log('adjustFontSize error:', e); } console.log('adjustFontSize took:', performance.now() - start, 'ms'); } // 更新字体大小UI function updateFontSizeUI(size) { try { const buttons = document.querySelectorAll('.jj-font-size-btn'); buttons[0].classList.toggle('active', size <= 14); buttons[1].classList.toggle('active', size >= 24); } catch (e) { console.log('updateFontSizeUI error:', e); } } // 初始化设置 function initializeSettings() { try { const savedTheme = localStorage.getItem('jj-theme') || 'default'; setTheme(savedTheme); const savedFontFamily = localStorage.getItem('jj-font-family') || '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"'; setFontFamily(savedFontFamily); const savedFontSize = parseInt(localStorage.getItem('jj-font-size')) || 16; adjustFontSize((savedFontSize - 16) / 2); } catch (e) { console.log('initializeSettings error:', e); } } // 创建工具栏 function createToolbar() { const trigger = document.createElement('div'); trigger.className = 'jj-toolbar-trigger'; trigger.textContent = '设置'; document.body.appendChild(trigger); const toolbar = document.createElement('div'); toolbar.className = 'jj-toolbar'; toolbar.innerHTML = `
`; document.body.appendChild(toolbar); trigger.addEventListener('click', () => { toolbar.classList.toggle('expanded'); }); toolbar.querySelectorAll('.jj-font-size-btn').forEach(btn => { btn.addEventListener('click', () => { const action = btn.dataset.action; adjustFontSize(action === 'increase' ? 1 : -1); }); }); toolbar.querySelectorAll('.jj-font-family-btn').forEach(btn => { btn.addEventListener('click', () => setFontFamily(btn.dataset.font)); }); toolbar.querySelectorAll('.jj-theme-card').forEach(card => { card.addEventListener('click', () => setTheme(card.dataset.theme)); }); document.addEventListener('click', e => { if (!toolbar.contains(e.target) && !trigger.contains(e.target)) { toolbar.classList.remove('expanded'); } }); } // 返回顶部按钮 const backToTop = document.createElement('div'); backToTop.className = 'back-to-top'; backToTop.textContent = '↑'; backToTop.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' }); document.body.appendChild(backToTop); function toggleBackToTop() { backToTop.style.display = window.scrollY > 200 ? 'block' : 'none'; } window.addEventListener('scroll', toggleBackToTop); toggleBackToTop(); // 等待DOM就绪 function waitForDOM() { if (document.querySelector('.noveltext, .readtd, #comment_list')) { createNewLayout(); } else { setTimeout(waitForDOM, 200); } } waitForDOM(); });})();
Sign in to post a reply.
感谢您的脚本,非常好用!我借助ai在此基础上加入了评论区的显示(这对我很重要)然后顶部的元素稍微用flex布局调整了元素的位置,不会移位了。我也留下代码供后来者使用:
(function() {
'use strict';
// 添加CSS样式
const style = document.createElement('style');
style.textContent = `
/* 全局重置 */
/* 强力重置所有原站点样式 */
html, body {
background-color: #f8f9fa !important;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important;
color: #333 !important;
line-height: 1.8 !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
}
/* 彻底重置所有元素 */
* {
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
font-family: inherit !important;
}
/* 重置所有默认边距 */
div, p, h1, h2, h3, h4, h5, span, table, tr, td, a, font {
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: inherit !important;
color: inherit !important;
}
/* ==================== 隐藏原始元素 ==================== */
/* 隐藏通用元素 */
#oneboolt,
.noveltitle:not(.jj-novel-header),
.novelbody:not(.jj-novel-content),
.noveltext:not(.jj-novel-content),
.readtitle:not(.jj-novel-header),
.readtd:not(.jj-novel-content),
table[width="984"],
table[width="100%"],
#comment_list,
#publishcomment,
td:has(> #comment_list),
.readcontrolbar,
.uninterested-hide,
.danmu,
.danmu_row,
#danmu_main,
.danmu_total_str,
marquee,
iframe,
#qrCodeDiv,
#footer,
div#footer,
body > div#footer,
[style*="z-index:333333"],
div.footer,
.copyright,
#copyright,
.bottomlinks,
#sitebottom,
div[class*="footer"],
div[align="center"]:has(> table):nth-last-of-type(-n+2) {
display: none !important;
}
/* 隐藏书签和收藏相关元素 */
div[align="right"]:has(> div[style*="float:right"]),
div[style*="float:right"][style*="height: 25px"],
div:has(> img[src*="bookmark.gif"]),
img[src*="bookmark.gif"],
span.favorite_novel,
span[id*="favorite_"],
span[id="report_action"],
span[id="yrt3"],
div[style*="width: 100%; text-align: center"]:has(span[id*="favorite_"]),
div[style*="width: 100%; text-align: center"]:has(span[id="report_action"]),
div[id="float_favorite"],
div[id="mongolia_layer"],
div[id="report_box"],
div[id*="favoriteshow_"],
span[id="chapterJurisdiction"],
font[color="#009900"]:has(> span.favorite_novel),
div.float_favorite,
a[href*="freegold"],
button[onclick*="FavoriteClass"],
div[class*="addFavoritClass"] {
display: none !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
/* 隐藏原始返回顶部按钮 */
a[href="#top"],
a[href="javascript:scroll(0,0)"],
a[onclick*="scroll(0,0)"],
#jj-top-link,
a[id="booktext_top"],
[onclick*="window.scrollTo"],
a[href^="javascript"][onclick*="window.scroll"],
div[style*="position: fixed"][style*="right:"][style*="bottom:"][style*="cursor: pointer"]:not(.back-to-top),
div[style*="width: 18px"][style*="line-height: 1.2"][style*="position: fixed"][style*="right: 10px"],
div[style*="background-color: rgb(0, 0, 0)"][style*="position: fixed"][title="返回顶部"] {
display: none !important;
pointer-events: none !important;
}
/* 正文容器 */
.jj-container {
max-width: 800px !important;
margin: 20px auto !important;
padding: 0 !important;
background-color: #fff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* 小说标题区域 - 单行布局 */
.jj-novel-header {
padding: 15px 40px !important;
text-align: left !important;
border-bottom: 1px solid #E0E0E0 !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
/* 小说标题 */
.jj-novel-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #222 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* 作者信息 */
.jj-novel-author {
font-size: 18px !important;
color: #666 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* 正文内容区域 - 局左排版 */
.jj-novel-content {
padding: 35px 40px !important;
text-align: left !important;
}
/* 章节导航区域 - 居中 */
.jj-chapter-nav {
padding: 25px 0 !important;
text-align: center !important;
border-top: 1px solid #E0E0E0 !important;
}
/* ==================== 元素样式 ==================== */
/* 正文段落 */
.jj-novel-content p {
margin: 1em 0 !important;
text-indent: 2em !important;
font-size: 18px !important;
line-height: 2 !important;
color: #2c3e50 !important;
letter-spacing: 0.02em !important;
}
/* 作者有话说基础样式 */
.jj-author-note,
#note_danmu_wrapper,
.note_main,
.note_content {
margin: 20px 0 !important;
padding: 20px 25px !important;
border-radius: 8px !important;
font-size: 16px !important;
line-height: 1.7 !important;
transition: all 0.3s ease !important;
}
/* 默认主题作者有话说 */
.theme-default .jj-author-note,
.theme-default #note_danmu_wrapper,
.theme-default .note_main,
.theme-default .note_content {
background-color: #E5E5E5 !important;
color: #333333 !important;
border: 1px solid #D8D8D8 !important;
}
/* 护眼主题作者有话说 */
.theme-eye-care .jj-author-note,
.theme-eye-care #note_danmu_wrapper,
.theme-eye-care .note_main,
.theme-eye-care .note_content {
background-color: #D8E5C0 !important;
color: #2C3E50 !important;
border: 1px solid #C5D4A9 !important;
}
/* 专注主题作者有话说 */
.theme-focus .jj-author-note,
.theme-focus #note_danmu_wrapper,
.theme-focus .note_main,
.theme-focus .note_content {
background-color: #F5ECD8 !important;
color: #3C3C3C !important;
border: 1px solid #E6D5B8 !important;
}
/* 夜间主题作者有话说 */
.theme-dark .jj-author-note,
.theme-dark #note_danmu_wrapper,
.theme-dark .note_main,
.theme-dark .note_content {
background-color: #2D2D30 !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 导航链接 */
.jj-nav-link {
display: inline-block !important;
margin: 0 15px !important;
padding: 10px 20px !important;
background-color: #f8f9fa !important;
border: 1px solid #e0e0e0 !important;
border-radius: 4px !important;
color: #444 !important;
font-size: 15px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
.jj-nav-link:hover {
background-color: #e8f0fe !important;
color: #0d66d0 !important;
border-color: #c0d7fe !important;
}
/* 章节选择下拉列表 */
.jj-chapter-select {
display: inline-block !important;
margin: 0 15px !important;
padding: 10px 15px !important;
background-color: #f8f9fa !important;
border: 1px solid #e0e0e0 !important;
border-radius: 4px !important;
color: #444 !important;
font-size: 15px !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
min-width: 150px !important;
text-align: center !important;
outline: none !important;
appearance: auto !important;
-webkit-appearance: auto !important;
}
.jj-chapter-select:hover, .jj-chapter-select:focus {
background-color: #e8f0fe !important;
color: #0d66d0 !important;
border-color: #c0d7fe !important;
}
/* 顶部导航栏样式 */
#sitetop {
position: relative !important;
background-color: #fff !important;
border-bottom: 1px solid #eee !important;
padding: 8px 20px !important;
font-size: 14px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
z-index: 1001 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 左侧时间显示 */
#sitetop #serverTime {
color: #666 !important;
font-size: 13px !important;
}
/* 右侧导航菜单 */
#sitetop .top_right #t_user_signin a{
color:#fff!important;
}
#sitetop .toplogin {
float: right !important;
}
#sitetop .toplogin .top_right{
display: flex;
justify-content: center;
align-items: center;
gap: 0 10px;
}
#t_user_sms{
display:none;
}
ul.cssMenu li:hover > a > span ,ul.cssMenu span{
background-image: none!important;
}
#sitetop #t_user_nav .cssMenu ul a{
font-size:12px!important;
display: flex!important;
align-items: center;
}
#sitetop .cssMenu ul a:hover {
background-color: #ff5925 !important;
}
#sitetop .top_right .cssMenu > li > a:hover{
color:#fff!important;
}
/* 用户信息样式 */
#sitetop #t_user_info {
display: inline-block !important;
margin-right: 15px !important;
}
#sitetop #t_user_info strong {
font-weight: normal !important;
}
#sitetop #t_user_info a {
color: #333 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
#sitetop #t_user_info a:hover {
color: #1e88e5 !important;
}
/* 导航菜单样式 */
#sitetop .cssMenu {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 15px !important;
}
#sitetop .cssMenu > li {
position: relative !important;
display: inline-block !important;
}
#sitetop .cssMenu > li > a {
color: #333 !important;
text-decoration: none !important;
padding: 5px 8px !important;
display: inline-block !important;
transition: color 0.2s ease !important;
}
#sitetop .cssMenu > li > a:hover {
color: #1e88e5 !important;
}
/* 下拉菜单样式 */
#sitetop .cssMenu ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: #fff !important;
border: 1px solid #eee !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
min-width: 150px !important;
padding: 5px 0 !important;
z-index: 1002 !important;
}
#sitetop .cssMenu li:hover > ul {
display: block !important;
}
#sitetop .cssMenu ul li {
display: block !important;
}
#sitetop .cssMenu ul a {
color: #333 !important;
text-decoration: none !important;
padding: 8px 15px !important;
display: block !important;
transition: all 0.2s ease !important;
font-size: 13px !important;
}
#sitetop .cssMenu ul a:hover {
background-color: #f5f5f5 !important;
color: #1e88e5 !important;
}
/* 签到按钮样式 */
#sitetop #t_user_signin a {
background:#ff5925 !important;
color: #ff5925 !important;
text-decoration: none !important;
padding: 2px 6px !important;
border: 1px solid #ff5925 !important;
border-radius: 2px !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
}
#sitetop #t_user_signin a:hover {
background-color: #ff5925 !important;
color: #fff !important;
}
/* 客户号样式 */
#sitetop .readerid {
color: #666 !important;
font-size: 13px !important;
margin-left: 5px !important;
}
#sitetop .readerid a {
color: #666 !important;
text-decoration: none !important;
}
#sitetop .readerid img {
vertical-align: middle !important;
cursor: pointer !important;
}
/* 夜间模式适配 */
.theme-dark #sitetop {
background-color: #2D2D30 !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark #sitetop a,
.theme-dark #sitetop #serverTime,
.theme-dark #sitetop .readerid,
.theme-dark #sitetop #t_user_info strong {
color: #fff !important;
}
.theme-dark #sitetop .cssMenu ul {
background-color: #2D2D30 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark #sitetop .cssMenu ul a:hover {
background-color: #4A4A4D !important;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
color: #666 !important;
text-align: center !important;
border-radius: 50% !important;
cursor: pointer !important;
z-index: 9999 !important;
font-size: 20px !important;
line-height: 40px !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.back-to-top:hover {
transform: scale(1.05) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}
/* 工具栏触发按钮 */
.jj-toolbar-trigger {
position: fixed !important;
top: 50% !important;
right: 30px !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
cursor: pointer !important;
z-index: 9999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
color: #666666 !important;
}
.jj-toolbar-trigger:hover {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
color: #333333 !important;
}
/* 夜间模式适配 */
.theme-dark .jj-toolbar-trigger {
background-color: rgba(74, 74, 77, 0.95) !important;
color: rgba(255, 255, 255, 0.8) !important;
}
.theme-dark .jj-toolbar-trigger:hover {
background-color: rgba(74, 74, 77, 1) !important;
color: rgba(255, 255, 255, 1) !important;
}
/* 主题设置工具栏 */
.jj-toolbar {
position: fixed !important;
top: 50% !important;
right: 80px !important;
transform: translateY(-50%) !important;
width: 240px !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
padding: 15px !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 12px !important;
z-index: 9998 !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translate(10px, -50%) !important;
}
.jj-toolbar.expanded {
opacity: 1 !important;
visibility: visible !important;
transform: translate(0, -50%) !important;
}
.jj-toolbar-trigger svg {
width: 24px !important;
height: 24px !important;
fill: #666 !important;
transition: transform 0.3s ease !important;
}
/* 字体选择组样式 */
.jj-font-family-group {
display: flex !important;
gap: 6px !important;
padding: 10px !important;
background-color: rgba(0, 0, 0, 0.06) !important;
border-radius: 6px !important;
}
.jj-font-family-btn {
flex: 1 !important;
padding: 6px 12px !important;
border: none !important;
background: none !important;
color: #666 !important;
cursor: pointer !important;
font-size: 14px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
position: relative !important;
}
.jj-font-family-btn[data-font*="PingFang"] {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei" !important;
}
.jj-font-family-btn[data-font*="Songti"] {
font-family: "Songti SC", SimSun, "宋体" !important;
}
.jj-font-family-btn:hover {
color: #333 !important;
background: rgba(0, 0, 0, 0.05) !important;
}
.jj-font-family-btn.active {
background: #fff !important;
color: #333 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* 主题卡片网格布局 */
.jj-theme-group {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
padding: 8px !important;
background-color: rgba(0, 0, 0, 0.03) !important;
border-radius: 8px !important;
}
/* 主题卡片 */
.jj-theme-card {
position: relative !important;
aspect-ratio: 16/9 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 500 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.jj-theme-card.active {
border: 2px solid #1e88e5 !important;
}
.jj-theme-card:hover {
border-color: #1e88e5 !important;
}
/* 主题预览 */
.jj-theme-preview {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
gap: 2px !important;
padding: 6px !important;
box-sizing: border-box !important;
}
/* 预览文本 */
.jj-theme-preview .preview-text {
font-size: 13px !important;
font-weight: 500 !important;
}
.jj-theme-preview .preview-name {
font-size: 11px !important;
font-weight: normal !important;
opacity: 0.8 !important;
}
/* 默认主题预览 */
.jj-theme-preview.default {
background-color: #EEEDED !important;
color: #333333 !important;
}
/* 护眼主题预览 */
.jj-theme-preview.eye-care {
background-color: #E6EFD5 !important;
color: #2C3E50 !important;
}
/* 专注主题预览 */
.jj-theme-preview.focus {
background-color: #FFFCF4 !important;
color: #3C3C3C !important;
}
/* 夜间主题预览 */
.jj-theme-preview.dark {
background-color: #4A4A4D !important;
color: #FFFFFF !important;
}
/* 工具栏标题 */
.jj-toolbar-title {
font-size: 14px !important;
font-weight: 500 !important;
color: #333 !important;
margin-bottom: 5px !important;
text-align: center !important;
}
/* 字体大小调整组 */
.jj-font-size-group {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 10px !important;
background-color: rgba(0, 0, 0, 0.03) !important;
border-radius: 8px !important;
}
/* 字体大小按钮组 */
.jj-font-size-buttons {
display: flex !important;
align-items: center !important;
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 6px !important;
padding: 2px !important;
}
/* 字体大小按钮 */
.jj-font-size-btn {
flex: 1 !important;
padding: 6px 12px !important;
border: none !important;
background: none !important;
color: #666 !important;
cursor: pointer !important;
font-size: 14px !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
position: relative !important;
}
.jj-font-size-btn:hover {
color: #333 !important;
background: rgba(0, 0, 0, 0.05) !important;
}
.jj-font-size-btn.active {
background: #fff !important;
color: #333 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* 字体大小进度点 */
.jj-font-size-dots {
display: flex !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 0 !important;
}
.jj-font-size-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background-color: rgba(0, 0, 0, 0.1) !important;
transition: all 0.2s ease !important;
}
.jj-font-size-dot.active {
background-color: #1e88e5 !important;
}
/* 主题名称标签 */
.jj-theme-name {
position: absolute !important;
bottom: 8px !important;
left: 8px !important;
right: 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
text-align: center !important;
padding: 4px 8px !important;
border-radius: 4px !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* 主题样式 */
/* 默认主题(纸张配色) */
.theme-default {
background-color: #E5E5E5 !important;
}
.theme-default body {
background-color: #E5E5E5 !important;
}
.theme-default .jj-container {
background-color: #EEEDED !important;
}
.theme-default .jj-novel-content p,
.theme-default .jj-novel-content div,
.theme-default .jj-novel-content span,
.theme-default .jj-novel-content font {
color: #333333 !important;
}
.theme-default .jj-author-note {
background-color: #E5E5E5 !important;
border-left-color: #D8D8D8 !important;
color: #333333 !important;
}
.theme-default .jj-nav-link {
background-color: #E5E5E5 !important;
border-color: #D8D8D8 !important;
color: #444444 !important;
}
.theme-default .jj-nav-link:hover {
background-color: #D8D8D8 !important;
color: #222222 !important;
}
.theme-default .jj-novel-header {
border-bottom-color: #D0D0D0 !important;
}
.theme-default .jj-chapter-nav {
border-top-color: #D0D0D0 !important;
}
/* 护眼主题 */
.theme-eye-care {
background-color: #D8E5C0 !important;
}
.theme-eye-care body {
background-color: #D8E5C0 !important;
}
.theme-eye-care .jj-container {
background-color: #E6EFD5 !important;
}
.theme-eye-care .jj-novel-content p,
.theme-eye-care .jj-novel-content div,
.theme-eye-care .jj-novel-content span,
.theme-eye-care .jj-novel-content font {
color: #2C3E50 !important;
}
.theme-eye-care .jj-author-note {
background-color: #D8E5C0 !important;
border-left-color: #C5D4A9 !important;
color: #2C3E50 !important;
}
.theme-eye-care .jj-nav-link {
background-color: #DCE5C9 !important;
border-color: #C5D4A9 !important;
color: #2C3E50 !important;
}
.theme-eye-care .jj-nav-link:hover {
background-color: #C5D4A9 !important;
color: #1B2E3F !important;
}
.theme-eye-care .jj-novel-header {
border-bottom-color: #B8C7A0 !important;
}
.theme-eye-care .jj-chapter-nav {
border-top-color: #B8C7A0 !important;
}
/* 专注主题 */
.theme-focus {
background-color: #F5ECD8 !important;
}
.theme-focus body {
background-color: #F5ECD8 !important;
}
.theme-focus .jj-container {
background-color: #FFFCF4 !important;
}
.theme-focus .jj-novel-content p,
.theme-focus .jj-novel-content div,
.theme-focus .jj-novel-content span,
.theme-focus .jj-novel-content font {
color: #3C3C3C !important;
}
.theme-focus .jj-author-note {
background-color: #F5ECD8 !important;
border-left-color: #E6D5B8 !important;
color: #3C3C3C !important;
}
.theme-focus .jj-nav-link {
background-color: #FFF7E6 !important;
border-color: #E6D5B8 !important;
color: #3C3C3C !important;
}
.theme-focus .jj-nav-link:hover {
background-color: #E6D5B8 !important;
color: #2C2C2C !important;
}
.theme-focus .jj-novel-header {
border-bottom-color: #D9C8A7 !important;
}
.theme-focus .jj-chapter-nav {
border-top-color: #D9C8A7 !important;
}
/* 夜间主题 */
.theme-dark {
background-color: #2D2D30 !important;
}
.theme-dark body {
background-color: #2D2D30 !important;
}
.theme-dark .jj-container {
background-color: #4A4A4D !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}
.theme-dark .jj-novel-content p,
.theme-dark .jj-novel-content div,
.theme-dark .jj-novel-content span,
.theme-dark .jj-novel-content font {
color: #FFFFFF !important;
}
.theme-dark .jj-author-note {
background-color: #2D2D30 !important;
border-left-color: rgba(255, 255, 255, 0.1) !important;
color: #FFFFFF !important;
}
.theme-dark .jj-nav-link {
background-color: #5A5A5D !important;
border-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-nav-link:hover {
background-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-novel-title,
.theme-dark .jj-novel-title a {
color: #FFFFFF !important;
}
.theme-dark .jj-novel-author,
.theme-dark .jj-novel-author a {
color: #BBBBBB !important;
}
.theme-dark .jj-toolbar {
background-color: rgba(74, 74, 77, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-toolbar-title {
color: #FFFFFF !important;
}
.theme-dark .jj-font-size-btn {
color: #FFFFFF !important;
}
.theme-dark .jj-font-size-btn:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-font-size-dot {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.theme-dark .jj-font-size-dot.active {
background-color: #FFFFFF !important;
}
.theme-dark .jj-chapter-select {
background-color: #5A5A5D !important;
border-color: #666666 !important;
color: #FFFFFF !important;
}
.theme-dark .jj-chapter-select:hover {
background-color: #666666 !important;
}
.theme-dark .jj-novel-header {
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .jj-chapter-nav {
border-top-color: rgba(255, 255, 255, 0.1) !important;
}
/* 评论区 */
.jj-comment-section {
padding: 20px !important;
border-top: 1px solid #e0e0e0 !important;
}
.jj-comment {
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #f0f0f0 !important;
}
.jj-comment-time {
font-size: 12px !important;
color: #888 !important;
margin-bottom: 4px !important;
}
.jj-comment-content {
font-size: 14px !important;
color: #333 !important;
}
#comment_list .readcontrolbar, #comment_list .agree_block, #comment_list .reply_submit,
#comment_list .uninterested-reader, #comment_list .tdtitle > .coltext > a,
#comment_list .blacktext, #comment_list .redcommentchapter {
display: none !important;
}
`;
document.head.appendChild(style);
// 防抖函数
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 页面加载后执行
window.addEventListener('load', function() {
// 清理无关元素
function removeElements() {
try {
const selectors = [
'div[style*="float:right"], img[src*="bookmark.gif"], span.favorite_novel',
'span[id*="favorite_"], span[id="report_action"], span[id="yrt3"]',
'div[id="float_favorite"], div[id="mongolia_layer"], div[id="report_box"]',
'div[id*="favoriteshow_"], span[id="chapterJurisdiction"], a[href*="freegold"]',
'button[onclick*="FavoriteClass"], div[class*="addFavoritClass"]',
'a[href="#top"], a[href="javascript:scroll(0,0)"], a[onclick*="scroll(0,0)"]'
].join(',');
document.querySelectorAll(selectors).forEach(el => {
if (!el.dataset.removed) {
el.style.display = 'none';
el.dataset.removed = 'true';
}
});
} catch (e) {
console.log('removeElements error:', e);
}
}
// 获取评论
function getComments() {
const start = performance.now();
const comments = [];
try {
const commentElements = document.querySelectorAll('#comment_list > div[id^="comment_"]:not([data-processed])');
commentElements.forEach(comment => {
const timeEl = comment.querySelector('.tdtitle .coltext');
const contentEl = comment.querySelector('.readbody span[id^="mormalcomment_"]');
const time = timeEl?.textContent.match(/发表时间:([^<]+)/)?.[1]?.trim();
const content = contentEl?.textContent?.trim();
if (time && content) {
comments.push({ time, content });
comment.dataset.processed = 'true';
}
});
} catch (e) {
console.log('getComments error:', e);
}
console.log('getComments took:', performance.now() - start, 'ms');
return comments;
}
// 更新评论区
function updateCommentSection(container) {
const start = performance.now();
try {
let commentSection = container.querySelector('.jj-comment-section');
const comments = getComments();
if (comments.length) {
if (!commentSection) {
commentSection = document.createElement('div');
commentSection.className = 'jj-comment-section';
container.appendChild(commentSection);
}
commentSection.innerHTML = `
评论
${comments.map(comment => `
`).join('')}
`;
}
} catch (e) {
console.log('updateCommentSection error:', e);
}
console.log('updateCommentSection took:', performance.now() - start, 'ms');
}
// 创建页面布局
function createNewLayout() {
const start = performance.now();
try {
removeElements();
// 获取标题和作者
let novelTitle = '', novelAuthor = '', authorHref = '', novelHref = '';
const titleEl = document.querySelector('.noveltitle h1, .noveltitle h2, .readtitle h1, .readtitle h2');
if (titleEl) {
const titleLink = titleEl.querySelector('a');
novelTitle = titleLink ? titleLink.textContent.trim() : titleEl.textContent.trim();
novelHref = titleLink ? titleLink.getAttribute('href') : '';
}
if (!novelHref) {
const match = window.location.href.match(/novelid=(\d+)/);
if (match) novelHref = `http://www.jjwxc.net/onebook.php?novelid=${match[1]}`;
}
const authorSpan = Array.from(document.querySelectorAll('span')).find(s => s.textContent.includes('作者:'));
if (authorSpan) {
const authorLink = authorSpan.querySelector('a');
novelAuthor = authorLink ? authorLink.textContent.trim() : '';
authorHref = authorLink ? authorLink.getAttribute('href') : '';
}
if (!novelAuthor) {
const authorLink = document.querySelector('a[href*="oneauthor.php"]');
if (authorLink) {
novelAuthor = authorLink.textContent.trim();
authorHref = authorLink.getAttribute('href');
}
}
// 获取正文
let contentHTML = '';
const contentEl = document.querySelector('.noveltext, .readtd, .novelbody[style*="grid-column:1"]:not(:has(div#copyrightlist))');
if (contentEl) {
contentHTML = contentEl.innerHTML;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = contentHTML;
tempDiv.querySelectorAll('div[style*="width: 100%; text-align: center"], div[style*="float:right"]').forEach(div => div.remove());
contentHTML = tempDiv.innerHTML;
}
// 获取导航
let prevLink = null, nextLink = null, tocLink = null;
document.querySelectorAll('a[href*="onebook.php"]').forEach(link => {
const text = link.textContent.trim();
if (text.includes('上一章')) prevLink = { href: link.getAttribute('href'), text };
else if (text.includes('下一章')) nextLink = { href: link.getAttribute('href'), text };
else if (text.includes('目录')) tocLink = { href: link.getAttribute('href'), text };
});
const chapterSelect = document.querySelector('#chapter_list') || Array.from(document.querySelectorAll('select')).find(s =>
Array.from(s.options).some(o => o.text.match(/第.*章|序章|楔子|尾声|番外/))
);
// 创建布局
const container = document.createElement('div');
container.className = 'jj-container';
const header = document.createElement('div');
header.className = 'jj-novel-header';
header.innerHTML = `
${novelAuthor ? `
` : ''}
`;
container.appendChild(header);
const content = document.createElement('div');
content.className = 'jj-novel-content';
content.innerHTML = contentHTML;
container.appendChild(content);
const nav = document.createElement('div');
nav.className = 'jj-chapter-nav';
if (prevLink) nav.innerHTML += `${prevLink.text}`;
if (chapterSelect) {
chapterSelect.classList.add('jj-chapter-select');
nav.appendChild(chapterSelect);
chapterSelect.addEventListener('change', () => chapterSelect.value && (window.location.href = chapterSelect.value));
}
if (nextLink) nav.innerHTML += `${nextLink.text}`;
if (tocLink && !chapterSelect) nav.innerHTML += `${tocLink.text}`;
container.appendChild(nav);
// 隐藏原有内容
document.querySelectorAll('body > *:not(#sitetop):not(style):not(script):not(.back-to-top):not(.jj-toolbar):not(.jj-toolbar-trigger)').forEach(el => {
if (el !== container) el.style.display = 'none';
});
document.body.appendChild(container);
updateCommentSection(container);
// 监听评论区变化
const commentObserver = new MutationObserver(debounce(() => updateCommentSection(container), 300));
const commentList = document.querySelector('#comment_list');
if (commentList) {
commentObserver.observe(commentList, { childList: true, subtree: true });
}
createToolbar();
initializeSettings();
} catch (e) {
console.log('createNewLayout error:', e);
}
console.log('createNewLayout took:', performance.now() - start, 'ms');
}
// 主题切换
function setTheme(theme) {
const start = performance.now();
try {
document.body.classList.remove('theme-default', 'theme-eye-care', 'theme-focus', 'theme-dark');
document.body.classList.add(`theme-${theme}`);
localStorage.setItem('jj-theme', theme);
document.querySelectorAll('.jj-theme-card').forEach(card => {
card.classList.toggle('active', card.dataset.theme === theme);
});
} catch (e) {
console.log('setTheme error:', e);
}
console.log('setTheme took:', performance.now() - start, 'ms');
}
// 字体切换
function setFontFamily(fontFamily) {
const start = performance.now();
try {
const content = document.querySelector('.jj-novel-content');
if (content) {
const textElements = content.querySelectorAll('p, div, span, font');
textElements.forEach(el => {
el.style.setProperty('font-family', fontFamily, 'important');
});
}
localStorage.setItem('jj-font-family', fontFamily);
updateFontFamilyUI(fontFamily);
} catch (e) {
console.log('setFontFamily error:', e);
}
console.log('setFontFamily took:', performance.now() - start, 'ms');
}
// 更新字体选择UI
function updateFontFamilyUI(fontFamily) {
try {
document.querySelectorAll('.jj-font-family-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.font === fontFamily);
});
} catch (e) {
console.log('updateFontFamilyUI error:', e);
}
}
// 字体大小调整
function adjustFontSize(delta) {
const start = performance.now();
try {
const content = document.querySelector('.jj-novel-content');
if (!content) return;
let currentSize = parseInt(localStorage.getItem('jj-font-size')) || 16;
const newSize = Math.min(Math.max(currentSize + delta * 2, 14), 24);
const textElements = content.querySelectorAll('p, div, span, font');
textElements.forEach(el => {
el.style.setProperty('font-size', `${newSize}px`, 'important');
el.style.setProperty('line-height', '1.8', 'important');
});
localStorage.setItem('jj-font-size', newSize);
updateFontSizeUI(newSize);
} catch (e) {
console.log('adjustFontSize error:', e);
}
console.log('adjustFontSize took:', performance.now() - start, 'ms');
}
// 更新字体大小UI
function updateFontSizeUI(size) {
try {
const buttons = document.querySelectorAll('.jj-font-size-btn');
buttons[0].classList.toggle('active', size <= 14);
buttons[1].classList.toggle('active', size >= 24);
} catch (e) {
console.log('updateFontSizeUI error:', e);
}
}
// 初始化设置
function initializeSettings() {
try {
const savedTheme = localStorage.getItem('jj-theme') || 'default';
setTheme(savedTheme);
const savedFontFamily = localStorage.getItem('jj-font-family') || '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"';
setFontFamily(savedFontFamily);
const savedFontSize = parseInt(localStorage.getItem('jj-font-size')) || 16;
adjustFontSize((savedFontSize - 16) / 2);
} catch (e) {
console.log('initializeSettings error:', e);
}
}
// 创建工具栏
function createToolbar() {
const trigger = document.createElement('div');
trigger.className = 'jj-toolbar-trigger';
trigger.textContent = '设置';
document.body.appendChild(trigger);
const toolbar = document.createElement('div');
toolbar.className = 'jj-toolbar';
toolbar.innerHTML = `
小
大
黑体
宋体
`;
document.body.appendChild(toolbar);
trigger.addEventListener('click', () => {
toolbar.classList.toggle('expanded');
});
toolbar.querySelectorAll('.jj-font-size-btn').forEach(btn => {
btn.addEventListener('click', () => {
const action = btn.dataset.action;
adjustFontSize(action === 'increase' ? 1 : -1);
});
});
toolbar.querySelectorAll('.jj-font-family-btn').forEach(btn => {
btn.addEventListener('click', () => setFontFamily(btn.dataset.font));
});
toolbar.querySelectorAll('.jj-theme-card').forEach(card => {
card.addEventListener('click', () => setTheme(card.dataset.theme));
});
document.addEventListener('click', e => {
if (!toolbar.contains(e.target) && !trigger.contains(e.target)) {
toolbar.classList.remove('expanded');
}
});
}
// 返回顶部按钮
const backToTop = document.createElement('div');
backToTop.className = 'back-to-top';
backToTop.textContent = '↑';
backToTop.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
document.body.appendChild(backToTop);
function toggleBackToTop() {
backToTop.style.display = window.scrollY > 200 ? 'block' : 'none';
}
window.addEventListener('scroll', toggleBackToTop);
toggleBackToTop();
// 等待DOM就绪
function waitForDOM() {
if (document.querySelector('.noveltext, .readtd, #comment_list')) {
createNewLayout();
} else {
setTimeout(waitForDOM, 200);
}
}
waitForDOM();
});
})();