如何实现点击按钮逐行带延迟展示已上传TXT文件内容

完整实现代码 #

你可以直接替换原有代码使用，默认每行展示间隔为300毫秒，可根据需求调整延迟数值：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TXT逐行展示</title>
</head>
<body>
  <input type="file" name="inputfile" id="inputfile" accept=".txt">
  <br>
  <button id="showLineBtn" disabled>逐行展示文件内容</button>
  <br>
  <pre id="output"></pre>

  <script>
    // 存储读取到的文件内容
    let uploadedFileContent = '';
    // 逐行展示的延迟时间，单位毫秒，可自行调整
    const LINE_DELAY = 300;

    const inputFile = document.getElementById('inputfile');
    const showLineBtn = document.getElementById('showLineBtn');
    const outputEl = document.getElementById('output');

    inputFile.addEventListener('change', function() {
      const fr = new FileReader();
      fr.onload = function() {
        uploadedFileContent = fr.result;
        showLineBtn.disabled = false;
        outputEl.textContent = '';
      }
      fr.readAsText(this.files[0]);
    })

    showLineBtn.addEventListener('click', function() {
      outputEl.textContent = '';
      // 兼容Windows、Mac不同系统的换行符格式
      const lineList = uploadedFileContent.split(/\r?\n/);
      lineList.forEach((line, index) => {
        setTimeout(() => {
          outputEl.textContent += line + '\n';
        }, index * LINE_DELAY);
      })
    })
  </script>
</body>
</html>

功能说明 #

• 上传文件前逐行展示按钮为禁用状态，成功读取TXT文件后自动启用
• 每次点击逐行展示按钮都会先清空已有展示内容，再从头开始逐行输出
• 要调整行间隔的话，直接修改LINE_DELAY的数值即可，数值越小展示速度越快
• input标签新增了accept=".txt"限制，只允许选择TXT格式文件，避免误操作

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