我有一个 for() 循环,用于设置表格中元素的 src、高度和宽度。我对 Javascript 相当陌生(大约 2-3 周,自学),但我在游戏 Second Life 中使用 Line Scripting Language (LSL) 编写代码,所以这对我来说似乎相当熟悉且易于理解。 . 这也是我的代码和其他人的代码的组合来完成这项工作。重要的部分,比如阅读“film1.txt”文件来自某人,然后经过大量修改以适合我。大多数变量都有我想到的名称,所以它可能看起来有点随意,..或者完全容易理解。
导致问题的Javascript:
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "film1.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
linesParted = allText.split(","); // Will separate each line into an array
document.getElementById("display").src=linesParted[0];
document.getElementById("displayText").innerHTML=linesParted[1];
var dispResize = new Image();
dispResize.src = linesParted[0];
dispResize.onload = function() {
var dispNewHeight = (this.height*(500))/this.width;
var dispNewWidth = 500;
document.getElementById("display").style.height = dispNewHeight;
document.getElementById("display").style.width = dispNewWidth;
}
//
var imgToDo;
for(imgToDo = 0; imgToDo < ((linesParted.length)/2); imgToDo++)
{
var imgToResize = new Image();
imgToDoTimes2 = linesParted[imgToDo*2]
if(imgToDoTimes2 != null) {
document.getElementById("img"+imgToDo).style.cursor = "pointer";
document.getElementById("img"+imgToDo).src=imgToDoTimes2;
imgToResize.src = imgToDoTimes2;
imgToResize.onload = function() {
var imgResizeNewHeight = (this.height*125)/this.width;
document.getElementById("img"+imgToDo).height = imgResizeNewHeight;
document.getElementById("img"+imgToDo).width = 125;
}
}
}
}
}
}
txtFile.send(null);
受 Javascript 影响的 HTML
<table border="0" align="center" cellpadding="0" cellspacing="0" id="displayTable">
<tr><td colspan="10"><center><div id="displayText"></div></center></td></tr>
<tr><td colspan="10" align="center"><img src="" id="display" onClick="scaleDisplay()" ondblclick="dblClick('display')" /></td></tr>
<tr><td></td><td colspan="6"><hr /></td><td></td></tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(0)" width="125" ondblclick="dblClick(0)"><img src="" width="125" id="img0"/></td>
<td onclick="fullsize(1)" width="125" ondblclick="dblClick(1)"><img src="" width="125" id="img1"/></td>
<td onclick="fullsize(2)" width="125" ondblclick="dblClick(2)"><img src="" width="125" id="img2"/></td>
<td onclick="fullsize(3)" width="125" ondblclick="dblClick(3)"><img src="" width="125" id="img3"/></td>
<td onclick="fullsize(4)" width="125" ondblclick="dblClick(4)"><img src="" width="125" id="img4"/></td>
<td onclick="fullsize(5)" width="125" ondblclick="dblClick(5)"><img src="" width="125" id="img5"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(6)" width="125" ondblclick="dblClick(6)"><img src="" width="125" id="img6"/></td>
<td onclick="fullsize(7)" width="125" ondblclick="dblClick(7)"><img src="" width="125" id="img7"/></td>
<td onclick="fullsize(8)" width="125" ondblclick="dblClick(8)"><img src="" width="125" id="img8"/></td>
<td onclick="fullsize(9)" width="125" ondblclick="dblClick(9)"><img src="" width="125" id="img9"/></td>
<td onclick="fullsize(10)" width="125" ondblclick="dblClick(10)"><img src="" width="125" id="img10"/></td>
<td onclick="fullsize(11)" width="125" ondblclick="dblClick(11)"><img src="" width="125" id="img11"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(12)" width="125" ondblclick="dblClick(12)"><img src="" width="125" id="img12"/></td>
<td onclick="fullsize(13)" width="125" ondblclick="dblClick(13)"><img src="" width="125" id="img13"/></td>
<td onclick="fullsize(14)" width="125" ondblclick="dblClick(14)"><img src="" width="125" id="img14"/></td>
<td onclick="fullsize(15)" width="125" ondblclick="dblClick(15)"><img src="" width="125" id="img15"/></td>
<td onclick="fullsize(16)" width="125" ondblclick="dblClick(16)"><img src="" width="125" id="img16"/></td>
<td onclick="fullsize(17)" width="125" ondblclick="dblClick(17)"><img src="" width="125" id="img17"/></td>
<td></td>
</tr>
<tr width="500" id="imgRow">
<td></td>
<td onclick="fullsize(18)" width="125" ondblclick="dblClick(18)"><img src="" width="125" id="img18"/></td>
<td onclick="fullsize(19)" width="125" ondblclick="dblClick(19)"><img src="" width="125" id="img19"/></td>
<td onclick="fullsize(20)" width="125" ondblclick="dblClick(20)"><img src="" width="125" id="img20"/></td>
<td onclick="fullsize(21)" width="125" ondblclick="dblClick(21)"><img src="" width="125" id="img21"/></td>
<td onclick="fullsize(22)" width="125" ondblclick="dblClick(22)"><img src="" width="125" id="img22"/></td>
<td onclick="fullsize(23)" width="125" ondblclick="dblClick(23)"><img src="" width="125" id="img23"/></td>
<td></td>
</tr>
<tr><td colspan="6" height="25"> </td></tr>
</table>
代码说明:我给它一个数组中的项目列表,该列表由服务器上名为film1.txt 的文件提供(就像幻灯片类型的东西,.. 但我改变了主意)。它是这样的:“filedir/filename.jpg,File Title,filedir/filename.jpg,File Title,filedir/filename.jpg,File Title”。它将 .split() 转换为一个数组,该数组使用“linesParted[]”调用。for() 循环通过从 0 开始直到它不再是 < (lineParted.length)/2 来完成它的工作。它创建一个新的 Image(),为在 for() 循环中测试的变量创建一个变量,在linesParted[] 中乘以 2,如果该新变量为 != 为 null,则在 if() 中进行测试。如果不是,则将 's style.cursor 设置为“指针”,将 src 设置为 src,将 Image() 的 src 设置为 imgToDoTimes2,然后一旦加载,
问题:由于某种原因,它将允许它不做任何事情的最后一个设置为空,因为它没有来自 film1.txt 的源数据,但它留下了一个边界框之类的东西,看起来与最后一个不为空的图像。
这是服务器上出现错误的上述代码的完整版本。注意注释:3(通常在顶部 index.html): http: //greengoosemarketing.com/so/
其他资源链接位于该页面的注释中。
在它所在的网站上的一句话:该网站属于我的高级动画老师。在那里张贴的作品将主要是学生的作品。“我的世界 C4D 渲染”是我唯一的作品。:3
让我知道我是否可以为您提供其他任何东西。