如何使用javascript将图像随机插入到表中？
如何使用javascript将图像随机插入到表中？
提问于 2014-05-15 22:32:46
我对javascript非常陌生，我正在创建一个游戏，用户通过单击重新排列图片表。这些图像实际上是用户必须整理的更大图像的片段。
用户单击表中的一个图像，然后单击表中的另一个图像，然后交换位置。为此，我必须使用javascript，所以我创建了一个3x4表，并填充了12个需要重新排列的“部分”图像。
每次页面加载时，我需要将每个单元格中的图像随机分配给每个游戏，用户必须以不同的方式对图像进行排序。
为此，我使用了一个diffImage()函数，它从我拥有的图像数组中选择一个随机图像。因此，如果我的图像之一名为"mario01.jpg"，则函数获取图像并使其为<img src="mario01.png" />。
我的diffImage()函数还将它从数组中选择的图像提取出来，这样图像就不会第二次插入到表中。
我想知道的是，如何将diffImage()函数合并到我的html中，在其中设置表，以便每次页面加载时，图像都位于不同的单元格中？
下面是我到目前为止所做的代码：
<head>
<link rel="stylesheet" href="hw3CSS.css" type="text/css"/>
<title>Picture Scramble Game</title>
</head>
<script>
var imagelist = ["mario01.jpg", "mario02.jpg", "mario03.jpg", "mario04.jpg", "mario05.jpg", "mario06.jpg", "mario07.jpg", "mario08.jpg", "mario09.jpg", "mario10.jpg", "mario11.jpg", "mario12.jpg"];
function diffImage() {
whichImage = Math.floor(Math.random()*imagelist.length);
document.write('<img src="'+imagelist[whichImage]+'" />');
imagelist.splice(whichImage,1);
}
</script>
<body onload="addEventListeners();">
</script>
<div id="table">
<table>
<tr><td><img class="element" id="image1" src="mario02.jpg" /></td>
<td><img class="element" id="image2" src="mario02.jpg" /></td>
<td><img class="element" id="image3" src="mario01.jpg" /></td>
</tr>
<tr><td><img class="element" id="image4" src="mario05.jpg" /></td>
<td><img class="element" id="image5" src="mario04.jpg" /></td>
<td><img class="element" id="image6" src="mario06.jpg" /></td>
</tr>
<tr><td><img class="element" id="image7" src="mario09.jpg" /></td>
<td><img class="element" id="image8" src="mario08.jpg" /></td>
<td><img class="element" id="image9" src="mario07.jpg" /></td>
</tr>
<tr><td><img class="element" id="image10" src="mario11.jpg" /></td>
<td><img class="element" id="image11" src="mario10.jpg" /></td>
<td><img class="element" id="image12" src="mario12.jpg" /></td></tr>
</table>
</div>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-15 22:59:35
更改diffImage函数，使其返回与所需图像的src相等的值。
类似于：
function diffImage() {
var output = '';
whichImage = Math.floor(Math.random()*imagelist.length);
output = imagelist[whichImage];
imagelist.splice(whichImage,1);
return output;
}然后把所有的图像看一遍，比如：
document.getElementById("image1").src = diffImage();
document.getElementById("image2").src = diffImage();
etc...我希望我的答案能帮到你，而不会过多地分配你的作业。
(PS:如果代码中没有写作业，你会得到更多的回复。)
Stack Overflow用户
发布于 2014-05-15 22:45:18
一种方法。
将html更改为如下所示：
<table>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
</tr>
...
<tr>
<td id="cell10"></td>
<td id="cell11"></td>
<td id="cell12"></td>
</tr>
</table>然后添加如下内容：
var cellElement, imageElement;
for (var i = 1; i <= 12; i++) {
cellElement = document.getElementById("cell" + i);
imageElement = document.createElement("img");
imageElement.src = ""; // random image url spliced into here
cellElement.appendChild(imageElement);
}或者，使用Javascript创建表及其内部的单元也可能更容易(当然也更灵活)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23689804
复制相关文章
相似问题
腾讯云开发者
