在JavaScript中,可以使用XMLHttpRequest对象或fetch API来读取txt文件并将其行打印到不同的div中。
使用XMLHttpRequest对象的示例代码如下:
function readTxtFile(fileUrl, divIds) {
var xhr = new XMLHttpRequest();
xhr.open('GET', fileUrl, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var lines = xhr.responseText.split('\n');
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line !== '') {
var divId = divIds[i % divIds.length];
var div = document.getElementById(divId);
div.innerHTML += line + '<br>';
}
}
}
};
xhr.send();
}
// 调用示例
var fileUrl = 'example.txt'; // txt文件的URL
var divIds = ['div1', 'div2', 'div3']; // 不同div的id数组
readTxtFile(fileUrl, divIds);
使用fetch API的示例代码如下:
function readTxtFile(fileUrl, divIds) {
fetch(fileUrl)
.then(response => response.text())
.then(text => {
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line !== '') {
var divId = divIds[i % divIds.length];
var div = document.getElementById(divId);
div.innerHTML += line + '<br>';
}
}
})
.catch(error => console.log(error));
}
// 调用示例
var fileUrl = 'example.txt'; // txt文件的URL
var divIds = ['div1', 'div2', 'div3']; // 不同div的id数组
readTxtFile(fileUrl, divIds);
以上代码中,readTxtFile
函数接受两个参数:txt文件的URL和不同div的id数组。它通过XMLHttpRequest对象或fetch API发送GET请求获取txt文件的内容,并将内容按行分割后打印到不同的div中。divIds
数组用于指定不同的div,如果行数多于div的数量,会循环使用div。
请注意,以上代码仅演示了如何在JavaScript中读取txt文件并打印到不同的div中,实际应用中可能需要根据具体需求进行适当的修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云