如何用JavaScript实现TXT文件内容每隔5秒逐行在浏览器循环展示

针对你的需求，我修改了代码，实现读取本地TXT后逐行弹窗显示、每行停留5秒自动切换并循环的功能，同时修复了原代码中的事件绑定错误：

基础alert弹窗版本（简单直接） #

<h1>逐行弹窗显示TXT内容</h1>
<input type="file" id="filechoice" />

<script type="text/javascript">
// 保留原有的shuffle函数（如果不需要可删除）
function shuffle(array) {
    let currentIndex = array.length, randomIndex;
    while (currentIndex != 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
    }
    return array;
}

// 存储文件行数据和当前显示索引
let fileLines = [];
let currentLineIndex = 0;
let popupTimer = null;

// 文件选择事件处理
document.getElementById('filechoice').addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = function() {
        // 分割行，兼容Windows和Unix换行格式，过滤空行
        fileLines = this.result.split(/\r?\n/).filter(line => line.trim() !== '');
        currentLineIndex = 0;

        // 清除之前的定时器，避免重复触发
        if (popupTimer) clearTimeout(popupTimer);

        // 启动逐行显示
        showNextLine();
    };
    reader.readAsText(selectedFile);
});

// 递归显示下一行
function showNextLine() {
    if (fileLines.length === 0) return;

    // 弹出当前行内容
    alert(fileLines[currentLineIndex]);

    // 更新索引，循环回到开头
    currentLineIndex = (currentLineIndex + 1) % fileLines.length;

    // 5秒后显示下一行
    popupTimer = setTimeout(showNextLine, 5000);
}
</script>

自定义页面弹窗版本（无阻塞，体验更好） #

如果觉得原生alert会阻塞页面操作，可以用自定义弹窗替代，样式可按需调整：

<h1>逐行弹窗显示TXT内容</h1>
<input type="file" id="filechoice" />

<!-- 自定义弹窗容器 -->
<div id="customPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 25px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-size: 19px; min-width: 300px; text-align: center;"></div>

<script type="text/javascript">
let fileLines = [];
let currentLineIndex = 0;
let popupTimer = null;
const customPopup = document.getElementById('customPopup');

document.getElementById('filechoice').addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = function() {
        fileLines = this.result.split(/\r?\n/).filter(line => line.trim() !== '');
        currentLineIndex = 0;

        if (popupTimer) clearTimeout(popupTimer);

        showNextLine();
    };
    reader.readAsText(selectedFile);
});

function showNextLine() {
    if (fileLines.length === 0) {
        customPopup.style.display = 'none';
        return;
    }

    // 更新弹窗内容并显示
    customPopup.textContent = fileLines[currentLineIndex];
    customPopup.style.display = 'block';

    currentLineIndex = (currentLineIndex + 1) % fileLines.length;

    popupTimer = setTimeout(showNextLine, 5000);
}
</script>

关键修改说明 #

1. 修复事件绑定错误：原代码错误地将window.onload赋值给change事件回调，现在改为直接定义事件处理函数，确保文件选择逻辑正常触发。
2. 兼容换行格式：用正则/\r?\n/分割行，同时过滤空行，避免弹出空白内容。
3. 循环逻辑实现：通过递归调用showNextLine结合setTimeout，实现每行显示5秒后自动切换，到达最后一行时通过取余运算回到第一行，完成循环。
4. 状态管理：用变量存储文件数据和定时器ID，重新选择文件时能清除旧定时器，避免冲突。

内容的提问来源于stack exchange，提问作者Cookie Programmer