javascript - 使用 Javascript 从文本文件加载随机字幕并通过 HTML 显示

Question

我试图在每次加载我的页面时加载一个随机标题。我有一个单独的文本文件，每一行都包含一个字符串。如您所见，我对 html 和 Javascript 都不熟悉。

HTML:

<div class="centerpiece">
                <h1>DEL NORTE BANQUEST</h1>
                <p class="caption"><script src = "js/caption.js"></script><script>getCaption();</script></p>
                <a class="btn" id="browse-videos-button" href="#video-list">Browse Videos<br><img src="img/arrow-down.svg"style="width:15px;height:15px;"></a>
            </div>

Javascript:

function getCaption()
{
  var txtFile = "text/captions.txt"
  var file = new File(txtFile);
  file.open("r"); // open file with read access
  var str = "";
  var numLines = 0; //to get the range of lines in the file
  while (!file.eof)
  {
      // read each line of text
      numLines += 1;
  }
  file.close();
  file.open("r");
  var selectLine = Math.getRandomInt(0,numLines);//get the correct line number
  var currentLine = 0;
  while(selectLine != currentLine)
  {
    currentLine += 1;
  }
  if(selectLine = currentLine)
  {
    str = file.readln();
  }
  file.close();
  return str;
}

源文件中的文本:

We talked yesterday
Freshman boys!
5/10
I'm having a heart attack *pounds chest super hard

该网站是为我的高中越野队准备的，以防文本文件令人困惑。

我不熟悉大多数语法，无法通过循环遍历文件来判断是否需要以某种方式重置，这就是我打开和关闭文件两次的原因。这是我要更改的特定标题的 jsfiddle 以及我在 Javascript 中的功能。

https://jsfiddle.net/7cre9qqj/

如果您需要更多代码，请告诉我，如果您有任何批评，如果它看起来一团糟，请不要犹豫，毕竟我正在努力学习!感谢您的帮助!

Answer 1

File API允许在客户端 端访问文件系统，因此它不太适合您想要执行的操作。它也只允许在非常特殊的情况下使用。

一个简单的解决方案是运行一个 AJAX 请求来填充您的报价。 AJAX 调用可以读取您服务器上的文件，然后很简单地按行拆分文件的内容，并选择一个随机行来显示。由于您对 jQuery 持开放态度，因此代码非常简单:

$.get("text/captions.txt")).then(function(data) {
  var lines = data.split('\n');
  var index = Math.floor(Math.random() * lines.length);
  $("#quote").html(lines[index]);
});

这是一个完整演示它的 fiddle ；每次运行时都会加载一个随机报价:https://jsfiddle.net/s1w8x4ff/