從文本文檔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.