Question

如果我想在我的网站上有一个包含文本的div，我想如何每5秒用一个从外部文本文件列表中获取的新文本字符串替换该文本。

这样的事情，但在“textlist”div中，它将文本文件中的第一个sting放在5秒后用第二行中的文本替换它，依此类推。

CODE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
function run() {

document.getElementById("textlist").innerHTML = "The sting from the text file";

}

window.setInterval(run,5000);

</script>
</head>

<body>
<div id="textlist">the text</div>
</body>
</html>

，文本文件就像这样：

/mytextfile.txt

（文件中的内容）

01：提示1

02：提示2

03：提示3

04：提示4

05：提示5

06：提示6

提前感谢希望它有意义。

Answer 1

我做的有点不同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
</head>

<body>
<div id="textlist">the text</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
  var ajax = $.ajax({
    url: 'the url to the text list',
    type: 'GET'
  });

  ajax.done(function (data) {
    var list = $.trim(data).split(/\n+/), index = 0;

    function run() {
      if (index >= list.length) {
        index = 0;
      }
      $('#textlist').html(list[index]);
      index ++;
    }

    window.setInterval(run, 5000);
  });
});
</script>
</body>
</html>

因此，在此示例中，我们首先将所有脚本移动到正文的底部。这样我们可以确保在脚本运行之前已经渲染了我们的html。

其次，我们将自定义JavaScript放入jQuery docready中。这样，在我们的脚本尝试运行之前，页面是完全交互的，这是非常安全的。

我们接下来要做的是使用ajax来获取文本文件。由于同源策略，这仅在该文件驻留在为网页提供服务的同一服务器上时才有效。

之后，我们将一个处理程序附加到ajax promise。换句话说，当ajax请求完成＆＃34;时，它将运行一个函数并传入检索到的数据。我们通过修剪字符串中的空白区域将数据转换为列表，并在有新行的地方将其拆分。我们还设置了一个变量来跟踪列表中的位置。

run函数将检查我们在列表中的位置。如果我们比列表中的项目数量更远，我们会将其重置为0.然后我们将使用当前列表项替换元素的html。最后，我们在列表中向上移动一个位置。

最后，我们致电setInterval，以便run每5秒运行一次。

警告：我还没有对此进行过测试，但从概念上来说它会起作用。可能存在拼写错误或者某些特定的ajax要求，我不知道与您的服务器有关，但我所描述的过程应该有效。

Answer 2

您可以ajax使用jquery。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test_text</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> var lines=""; $.get( "your_text_file_path", function( data ) { lines=data.split("\n"); }); var i=0; window.setInterval(function (){ if(i<=lines.length){ $("#textlist").html(lines[i]); i++; }else{ i=0; } },5000); </script> </head> <body> <div id="textlist">the text</div> </body> </html>（已经附加到您的文档中）您可以轻松地执行以下操作：

{{1}}

这里你是demo那样做

如何从txt文档中的列表中获取文本字符串？

2 个答案: