网页隐藏版之一行小说阅读器

显示效果:
在这里插入图片描述
懒人操作:
页面鼠标右键,新建文本文档,复制黏贴以下代码,点击左上角【文件】,点击【另存为】,如下设置,后缀为.html,这样一个本地网页就完成啦~
在这里插入图片描述

<!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>

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部