【护眼阅读】PC端通过主流常用浏览器打开本地WEB页面阅读本地TXT小说

置顶

starfire_hit

已于 2023-02-23 15:12:28 修改

阅读量2.1k

点赞数 1

分类专栏：工具 JAVAWEB 文章标签：前端 html css javascript

于 2022-08-27 20:33:21 首次发布

本文链接：https://blog.csdn.net/starfire_hit/article/details/126560407

版权

本文介绍了如何使用HTML、CSS和JavaScript技术在PC端创建一个护眼的本地TXT小说阅读器。通过分析需求，作者选择纯Web前端实现，以避免复杂的界面适配和不必要的功能。主要内容包括HTML结构、CSS样式设计和JS交互功能，如字体颜色、背景色、字号调整、章节导航等，旨在提供一个简洁、舒适的阅读体验。

摘要由CSDN通过智能技术生成

自用-通过WEB页面阅读本地小说，生成章节导航，设置字色和背景色达到护眼目的，HTML+CSS+JS

章节导航
- 需求分析
- HTML代码
- CSS代码
- JS代码
- 总结

章节导航

从分析需求入手，查找资料，制定方案，通过ctrlCV大法实现目的。

需求分析

平时打发时间看些小说，有时从网上找一些txt的资源，在安卓手机上有非常好用而且顺眼的阅读APP，但是小小屏幕看久了总是会累的。用电脑看，视野开阔，阅读效率也高，然而目前PC阅读常见的方案无论是网站阅读（页面配色不够舒适，广告多）还是EXE阅读（如TXT小说阅读器，虽然用着不错，仍嫌配色不够护眼）总是差强人意，所以我就需要有一个能满足护眼需求的阅读工具。
考虑自己半吊子的QT能力和前后端水平，罗列了几种可用方案，并最终选择了纯html+css+js的简单实现。

纯QT实现 ，考虑界面如何自适应会比较麻烦，虽然是在看小说，但是既然是在电脑上，就要考虑应用遮挡问题，难免需要调整窗口大小。另外学艺不精，配置各种图标和做中文处理的时候难免遇到各种问题；由于UI美工能力不足，需要不停调试效果，用QT一次次编译生效实在有点恶心，想做点能在使用时对阅读器效果灵活配置的功能会不断增加项目规模，然而我只是想爱眼阅读而已。
本地WEB 做界面，还是web前端三剑客实现起来容易。无论是划分功能块、调整样式，还是添加操作上的交互，都很容易。基本上浏览器也都支持打开本地文件。
QT+本地WEB 其实是有些配置能存下来会比较好的，比如历史文件、阅读到的位置、字号颜色等配置，要么前台cache，或者用后台，后台用jar或者c都行，c的话新建个qt项目就是了，那么把web直接嵌到QT界面上并实现通信就是个容易想到的方案。不过也有些“成本”问题，后台读写配置要么用配置文件读写，要么连个redis或mysql，终归只是想实现些锦上添花的功能，却要多实现不少东西。而且虽然没有尝试，但很可能打开文件时要从浏览器支持的FileReader换成从C读取文件并发内容给WEB了。
本地WEB页面丢到NGINX里 想用cache存一些配置数据，用本地web文件是不行的，丢到ngnix里面去，通过http访问，操作起来还挺简单。

那么我对功能点的具体需求是什么呢？

没有乱七八糟的多余元素 自己从头做起来的东西，有多余的东西倒还比较难
加载文档最基本都需求。IE以外的浏览器基本都能很方便的支持
修改字色、背景色、字号等做这个东西都核心目的。灵活点可以整个调色盘，简单点就挑些配色做下拉框
定位/章节导航切割文档，类似翻页。正则匹配，用通用点的规则，结果可能就没那么精准，按需取舍
保存阅读配置至少记录下读到的章节
翻页/翻章节 ctrl + ←→方向键

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>本地TXT阅读</title>
    <meta name="name" content="content" charset="utf-8">
	
	<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.css">
	
	<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
	<script src='./settings.js' type='text/javascript'></script>
  </head>
  <body>
	
    <input type="file" id="file" />
    <input type="button" onclick="readText()" value="打开">
	<input type='number' id="fontsizt" min='16' max='32' value='22'/>
	<input type="button" onclick="setSize()" value="设置字号">
	<input type='number' id="paragraght" min='1' max='' value='1'/>
	<input type="button" onclick="setParagraph()" value="设置章节">	
	<input type="button" id="prev" onclick="Number.parseInt(document.getElementById('paragraght').value)>1&&document.getElementById('paragraght').value--;setParagraph()" value="上一章">	
	<input type="button" id="next" onclick="Number.parseInt(document.getElementById('paragraght').value)<Number.parseInt(document.getElementById('paragraght').max)&&document.getElementById('paragraght').value++;setParagraph()" value="下一章">	

	<div id="top" style="position:absolute;top:2px;right:10px">
	颜色: <select id="fcolor" onchange="setColor(this)"><option>选择</option>
<option value="blue" style="color:blue">蓝色</option>
<option value="yellow" style="color:yellow;background-color:#73B6EF">黄色</option>
<option value="navy" style="color:navy">海军蓝</option>
<option value="royalblue" style="color:royalblue">皇家蓝</option>
<option value="green"