网页隐藏版之一行小说阅读器
显示效果：
懒人操作：
页面鼠标右键，新建文本文档，复制黏贴以下代码，点击左上角【文件】，点击【另存为】，如下设置，后缀为.html，这样一个本地网页就完成啦~
javascript
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
https://baidu.com
</title>
<style>
body {
margin: 0;
padding: 0;
}
p {
font-size: 15px;
margin: 0;
padding: 0;
}
/* 设置文件输入框的样式 */
#fileInput {
font-size: 10px;
margin: 0;
padding: 0;
position: absolute;
bottom: 1px;
left: 1px;
}
/* txt内容显示框 */
#fileContent {
POSITION: absolute;
white-space: pre-wrap;
BOTTOM: 0px;
LEFT: 400px;
font-size: 0.7em;
line-height: normal;
text-align: left;
}
/* url内容显示框 */
iframe {
width: 100%;
height: calc(98vh);
margin: 0;
padding: 0;
border: none;
}
/* 当前行数 */
#currentLine {
font-size: 12px;
position: absolute;
bottom: 0px;
left: 4px;
color: #9c9c9c;
}
/* 用于隐藏/显示txt内容和当前行数 功能区 */
.content {
position: absolute;
bottom: 40px;
right: 30px;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
/* 用于隐藏/显示txt内容和当前行数 的S/H 按钮 */
#BtnsBtn,
#RowsBtn,
#nextBtn,
#preBtn {
margin-right: 6px;
width: 20px;
height: 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#BtnsBtn {
background-color: rgb(187 187 187);
border: none;
border-radius: 20%;
}
#BtnsBtn:active {
background-color: rgb(27, 152, 255);
}
#RowsBtn:active {
background-color: rgb(114, 114, 114);
}
/* 跳转、重置行数\重置、清空url功能区 */
.updataRowsDiv,
.updataUrlDiv,
.updataLeftDiv,
#resetKeyborderDiv {
position: absolute;
right: 30px;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.updataRowsDiv {
bottom: 111px;
}
.updataUrlDiv {
bottom: 75px;
}
.updataLeftDiv {
bottom: 180px
}
#resetKeyborderDiv {
bottom: 150px;
}
#resetKeyborderDiv label {
margin-right: 3px;
font-size: 12px;
line-height: 23px;
background: #e9e9e9;
}
#resetKeyborderDiv #resetKeyborder {
margin-right: 5px;
background-color: rgb(0, 69, 126);
color: white;
border-radius: 4px;
border: none;
width: 83px;
height: 27px;
font-size: 11px;
}
#resetKeyborderDiv #resetKeyborder:active {
background-color: rgb(2, 141, 255);
}
/* 行数输入框、url输入框 、调整行数输入框*/
#jumpLineInput,
#urlInput,
#leftInput {
width: 120px;
margin-right: 5px;
padding: 2px;
font-size: 11px;
border-radius: 4px;
border: 1px solid rgb(189, 188, 188);
}
#leftInput {
width: 117px;
height: 23px;
font-size: 12px;
color: #707070;
}
/* 跳转、重置行数、重置、清空url按钮 */
.updataRowsDiv #jumpBtn,
.updataRowsDiv #resetBtn,
.updataUrlDiv #setUrlBtn,
.updataUrlDiv #resetUrlBtn {
margin-right: 5px;
background-color: rgb(0, 69, 126);
color: white;
border-radius: 4px;
border: none;
width: 40px;
height: 32px;
font-size: 11px;
}
/* 初始化不显示 */
#jumpBtn,
#resetBtn,
#jumpLineInput,
#jumpBtn,
#resetBtn,
#urlInput,
#setUrlBtn,
#resetUrlBtn,
#BtnsBtn,
#RowsBtn,
#nextBtn,
#preBtn,
#leftInput,
#resetKeyborderDiv {
display: none;
}
</style>
</head>
<body>
<!-- 外部url显示区 -->
<iframe id="webFrame" src="https://help.aliyun.com/document_detail/153739.html?spm=a2c4g.150040.0.0.d890272c6njJmN"
title="网站"></iframe>
<!-- 选择txt文件区 -->
<input type="file" id="fileInput" accept=".txt">
<!-- txt文本显示区 -->
<div id="fileContent"></div>
<!-- 当前行数显示区 -->
<div id="currentLine"></div>
<div class="functionDiv">
<!-- 四个按钮区（上一行、下一行、隐藏/显示） -->
<div class="content">
<button id="preBtn">-</button>
<button id="RowsBtn"></button>
<button id="nextBtn">+</button>
<button id="BtnsBtn"></button>
</div>
<!-- 调整txt行数功能区 -->
<div class="updataRowsDiv">
<input type="number" id="jumpLineInput" placeholder="输入行数：">
<button id="jumpBtn">跳转</button>
<button id="resetBtn">重置</button>
</div>
<!-- 调整url内容功能区 -->
<div class="updataUrlDiv">
<input type="url" id="urlInput" placeholder="输入外部链接(网页显示)：">
<button id="setUrlBtn">设置</button>
<button id="resetUrlBtn">清空</button>
</div>
<!-- 调整文本位置功能区 -->
<div class="updataLeftDiv">
<p style="font-size: 12px;text-align: left;line-height: 28px;display: none;" id="leftText">可调整文本位置：</p>
<input type="number" id="leftInput" value="400" />
</div>
<!-- 调整键盘按钮控制功能区 -->
<div id="resetKeyborderDiv">
<label>上:</label>
<label id="prevLineKey"></label>
<label>下:</label>
<label id="nextLineKey"></label>
<label>显/隐:</label>
<label id="hideShowKey"></label>
<button id="resetKeyborder">修改按键</button>
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const fileContent = document.getElementById('fileContent');
const currentLineDiv = document.getElementById('currentLine');
const RowsBtn = document.getElementById('RowsBtn');
const BtnsBtn = document.getElementById('BtnsBtn');
const nextBtn = document.getElementById('nextBtn');
const preBtn = document.getElementById('preBtn');
const jumpLineInput = document.getElementById('jumpLineInput');
const jumpBtn = document.getElementById('jumpBtn');
const resetBtn = document.getElementById('resetBtn');
const webFrame = document.getElementById('webFrame');
const urlInput = document.getElementById('urlInput');
const setUrlBtn = document.getElementById('setUrlBtn');
const resetUrlBtn = document.getElementById('resetUrlBtn');
const leftText = document.getElementById('leftText');
const leftInput = document.getElementById('leftInput');
const resetKeyborder = document.getElementById('resetKeyborder');
const hideShowKey = document.getElementById('hideShowKey');
const prevLineKey = document.getElementById('prevLineKey');
const nextLineKey = document.getElementById('nextLineKey');
const resetKeyborderDiv = document.getElementById('resetKeyborderDiv');
let lineIndex = 0;
let lines = [];
let filename = ''; // 用于存储文件名的变量
// 自定义函数------当前行数显示
function displayLine() {
fileContent.textContent = lines[lineIndex] || '';
currentLineDiv.textContent = `第${lineIndex + 1}行`;
localStorage.setItem('savedLineIndex', lineIndex + 1);
}
// 自定义函数：将文本按照指定长度切割为每行
function splitTextIntoLines(text, length) {
const regex = new RegExp(`.{1,${length}}`, 'g');
return text.match(regex) || [];
}
// 自定义函数------显示/隐藏多按钮(重置、跳转、清空、行数位置、键盘按钮)
function ShowOrHideBtns(status) {
jumpLineInput.style.display = status;
jumpBtn.style.display = status;
resetBtn.style.display = status;
urlInput.style.display = status;
setUrlBtn.style.display = status;
resetUrlBtn.style.display = status;
leftInput.style.display = status;
leftText.style.display = status;
resetKeyborderDiv.style.display = status;
}
// 自定义函数------显示/隐藏多按钮(上一行、下一行、隐藏/显示按钮)
function FourBtns(status) {
BtnsBtn.style.display = status
RowsBtn.style.display = status
nextBtn.style.display = status
preBtn.style.display = status
}
// 自定义函数------显示/隐藏行数
function ShowOrHideRows(status) {
fileContent.style.display = status;
currentLineDiv.style.display = status;
}
// 自定义函数------调整txt文本位置
function setLeftValue() {
var savedLeftValue = localStorage.getItem('leftValue');
if (savedLeftValue !== null) {
fileContent.style.left = savedLeftValue + 'px';
leftInput.value = savedLeftValue;
} else {
leftInput.value = 400;
fileContent.style.left = '400px';
}
}
// 检查是否有保存的URL
const savedUrl = localStorage.getItem('savedUrl');
if (savedUrl) {
webFrame.src = savedUrl;
}
// 加载文件后
fileInput.addEventListener('change', function (event) {
setLeftValue();// 自动加载txt文本位置
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (event) {
fileInput.style.display = 'none'
fileContent.style.display = 'block'
FourBtns('block')
const fileText = new TextDecoder('utf-8').decode(event.target.result);
lines = splitTextIntoLines(fileText, 70); // 调用自定义函数将文本切割为每行70个字符
filename = file.name; // 保存文件名
const savedFilename = localStorage.getItem("save_filename");
if (filename === savedFilename) {
lineIndex = parseInt(localStorage.getItem('savedLineIndex')) || 0; // 转换为整数
} else {
localStorage.setItem('save_filename', filename);
lineIndex = 0; // 重置行索引
}
displayLine();
fileInput.classList.add('hide');
};
reader.readAsArrayBuffer(file);
});
// 上一行按钮
preBtn.addEventListener('click',
function () {
lineIndex--;
if (lineIndex < 0) {
lineIndex = 0;
}
displayLine();
}
);
// 下一行按钮
nextBtn.addEventListener('click',
function () {
lineIndex++;
if (lineIndex >= lines.length) {
lineIndex = lines.length - 1;
}
displayLine();
});
// 显示、隐藏按钮
RowsBtn.addEventListener('click', function () {
toggleDisplay()
});
// 重置键盘控制按钮功能
resetKeyborder.addEventListener('click', function () {
let prevLineKey, nextLineKey, hideShowKey;
do {
prevLineKey = prompt("请输入用于上一行的键:").toUpperCase();
if (prevLineKey.length !== 1) {
alert("请输入单个字符作为键!");
}
} while (prevLineKey.length !== 1);
do {
nextLineKey = prompt("请输入用于下一行的键:").toUpperCase();
if (nextLineKey.length !== 1) {
alert("请输入单个字符作为键!");
}
} while (nextLineKey.length !== 1);
do {
hideShowKey = prompt("请输入用于隐藏/显示文本的键:").toUpperCase();
if (hideShowKey.length !== 1) {
alert("请输入单个字符作为键!");
}
} while (hideShowKey.length !== 1);
// 保存到 localStorage
localStorage.setItem('prevLineKeylocalStorage', prevLineKey);
localStorage.setItem('nextLineKeylocalStorage', nextLineKey);
localStorage.setItem('hideShowKeylocalStorage', hideShowKey);
// 转换为大写字母以处理大小写不敏感
prevLineKey = prevLineKey.toUpperCase();
nextLineKey = nextLineKey.toUpperCase();
hideShowKey = hideShowKey.toUpperCase();
// 显示设置的键
document.getElementById('prevLineKey').textContent = prevLineKey;
document.getElementById('nextLineKey').textContent = nextLineKey;
document.getElementById('hideShowKey').textContent = hideShowKey;
// 添加键盘按钮监听事件
document.addEventListener('keydown', keyHandler);
});
// 页面加载时检查 键盘控制的 localStorage
document.addEventListener('DOMContentLoaded', function () {
let prevLineKey = localStorage.getItem('prevLineKeylocalStorage');
let nextLineKey = localStorage.getItem('nextLineKeylocalStorage');
let hideShowKey = localStorage.getItem('hideShowKeylocalStorage');
// 若 localStorage 存在
if (prevLineKey && nextLineKey && hideShowKey) {
prevLineKey = prevLineKey.toUpperCase();
nextLineKey = nextLineKey.toUpperCase();
hideShowKey = hideShowKey.toUpperCase();
document.getElementById('prevLineKey').textContent = prevLineKey;
document.getElementById('nextLineKey').textContent = nextLineKey;
document.getElementById('hideShowKey').textContent = hideShowKey;
// 添加键盘按钮监听事件
document.addEventListener('keydown', keyHandler);
} else {
alert("本网页用于1行阅读txt文件\n 前提：需加载编码为utf-8的txt文件\n 功能(右下角按钮可展示)：\n 1、修改按键控制下行与显隐藏\n（默认：上Q下E显隐W）\n 2、可指定行数跳转\n 3、可修改显示网页url\n 4、可重置txt文件\n 5、可按钮控制下行与显隐藏\n 6、自动保存上一次阅读的行数\n 7、可调整阅读文本位置\n 请尽情摸鱼吧~");
document.addEventListener('keydown', function (event) {
localStorage.setItem('prevLineKeylocalStorage', 'Q');
localStorage.setItem('nextLineKeylocalStorage', 'E');
localStorage.setItem('hideShowKeylocalStorage', 'W');
// 添加键盘按钮监听事件
document.addEventListener('keydown', keyHandler);
});
}
});
// 自定义键盘按钮监听事件
function keyHandler(event) {
let prevLineKey = localStorage.getItem('prevLineKeylocalStorage');
let nextLineKey = localStorage.getItem('nextLineKeylocalStorage');
let hideShowKey = localStorage.getItem('hideShowKeylocalStorage');
if (prevLineKey && nextLineKey && hideShowKey) {
document.getElementById('prevLineKey').textContent = prevLineKey;
document.getElementById('nextLineKey').textContent = nextLineKey;
document.getElementById('hideShowKey').textContent = hideShowKey;
prevLineKey = prevLineKey.toUpperCase();
nextLineKey = nextLineKey.toUpperCase();
hideShowKey = hideShowKey.toUpperCase();
if (event.key.toUpperCase() === nextLineKey) {
lineIndex++;
if (lineIndex >= lines.length) {
lineIndex = lines.length - 1;
}
displayLine();
}
if (event.key.toUpperCase() === prevLineKey) {
lineIndex--;
if (lineIndex < 0) {
lineIndex = 0;
}
displayLine();
}
if (event.key.toUpperCase() === hideShowKey) {
toggleDisplay();
}
}
}
// 切换显示和隐藏行的函数
function toggleDisplay() {
if (fileContent.style.display === 'none') {
ShowOrHideRows('block');
nextBtn.style.display = 'block';
preBtn.style.display = 'block';
} else {
ShowOrHideRows('none');
nextBtn.style.display = 'none';
preBtn.style.display = 'none';
}
}
// 跳转行数
jumpBtn.addEventListener('click', function () {
const jumpLine = parseInt(jumpLineInput.value);
if (!isNaN(jumpLine) && jumpLine > 0 && jumpLine <= lines.length) {
lineIndex = jumpLine - 1;
displayLine();
jumpLineInput.value = "";
} else {
alert('请输入有效的行数！');
jumpLineInput.value = "";
}
});
// 显示/隐藏多个按钮(重置、跳转、清空)
BtnsBtn.addEventListener('click', function () {
if (leftText.style.display == 'none') {
ShowOrHideBtns('block')
} else {
ShowOrHideBtns('none')
}
});
// 重置txt文件
resetBtn.addEventListener('click', function () {
if (confirm('确定要重新选择txt文件吗？')) {
FourBtns('none')
fileInput.style.display = 'block'
fileInput.value = null; // 允许重新选择相同文件
fileContent.textContent = '';
currentLineDiv.textContent = '';
ShowOrHideBtns('none')
} else {
return;
}
});
// 重置url网页
setUrlBtn.addEventListener('click', function () {
const newUrl = urlInput.value;
if (newUrl) {
webFrame.src = newUrl;
localStorage.setItem('savedUrl', newUrl);
urlInput.value = '';
} else {
alert('请输入有效的URL！');
}
});
// 清空url网页
resetUrlBtn.addEventListener('click', function () {
if (confirm('确定要清空整个页面内容吗？')) {
webFrame.src = '';
ShowOrHideRows('none')
localStorage.removeItem('savedUrl');
}
});
// 调整行数位置
leftInput.addEventListener('input', function () {
var leftValue = this.value;
fileContent.style.left = leftValue + 'px';
localStorage.setItem('leftValue', leftValue);
});
</script>
</body>
</html>