从文本文档javascript中“旋转” /切换文本？
[英]“rotating” / switching text from text document javascript?
问题描述
我正在尝试从文本文档中提取文本，然后将其拆分，以使“〜”之前的第一部分显示在一个div中，然后将其余部分添加到另一个div中，它也会切换出文本，因此首先显示文本文档的第一行，然后在5秒钟后转到第二行，依此类推，当显示最后一行时，它将循环回到第一行。
希望这是有道理的，由于文本文档的同源策略，这可能与JSFiddle代码有关，但是我已经在服务器上尝试过了，但是在那也不起作用。
我在这里想念什么？
代码示例： JSFiddle
在文本文档中：
0.001TXT~Example text 01
0.002TXT~Example text 02
0.003TXT~Example text 03
0.004TXT~Example text 04
0.005TXT~Example text 05
0.006TXT~Example text 06
HTML：
<body>
<div id="numbers01">0.000</div>
<div id="text01">text</div>
</body>
Javascript ：
$(document).ready(function () {
var lines = "";
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
});
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
提前致谢。
2 个解决方案
解决方案1
2 已采纳 2014-02-07 19:54:23
我还没有一个完整的答案，但是现在可以使用一些东西，因为默认情况下JS调用是异步的，所以下面的代码在接收数据之前就已运行。 通过在回调内移动代码应该可以解决您的第一个问题。
$(document).ready(function () {
var lines, i = 0;
$.get("http://www.patan77.com/example_text.txt", function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
});
});
这样，它要好得多，但我还无法使它正常工作。 无论如何，因为它仍然不起作用...我决定改用这样更方便的ajax方法。 我添加了一个错误处理程序...我认为您的服务器可能在接收到空主体时阻止了ajax请求。 如果我加载不带ajax的URL，它将加载文件。
$(document).ready(function () {
var lines, i = 0;
$.ajax("http://www.patan77.com/example_text.txt", {
dataType: "text",
success: function (data) {
lines = data.split("\n");
window.setInterval(function () {
// Index is always in range
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
// Move this part to only control the index
if (i < lines.length) {
i++;
} else {
i = 0;
}
}, 5000);
},
error: function (xhr, error, errorThrown) {
console.log(error + " " + errorThrown);
}
});
});
由于无法加载数据，因此我做了一个小jsfiddle并在此处模拟了数据
问题位于那条线上：
if (i <= lines.length) {
代替
if (i < lines.length) {
解决方案2
2 2014-02-07 19:55:50
将整个代码放入$ .get回调中
$(document).ready(function () {
$.get("http://www.patan77.com/example_text.txt", function (data) {
var lines = data.split("\n");
var i = 0;
window.setInterval(function () {
if (i <= lines.length) {
var line_string = (lines[i]).split("~");
$("#numbers01").html(line_string[0]);
$("#text01").html(line_string[1]);
i++;
} else {
i = 0;
}
}, 5000);
});
});
否则，由于jQuery AJAX函数是异步的，因此在尚未填充“行”时将调用window.setInterval函数。
使用Mysql数据库中的Javascript旋转文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.