我有一个 3x4 的图像表,我想像拼图一样对其进行打乱。总共有 12 个单独的 gif。我需要帮助的地方是,严格使用javascript,我该如何设置它,以便它在每次页面加载时随机打乱图像?到目前为止,我已将所有图像加载到一个数组中,如下所示:
不完整的 JS:
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'pic_01.gif';
imgArray[1] = new Image();
imgArray[1].src = 'pic_02.gif';
imgArray[2] = new Image();
imgArray[2].src = 'pic_03.gif';
imgArray[3] = new Image();
imgArray[3].src = 'pic_04.gif';
etc... pic_05.gif...
我的 HTML:
<table>
<tr>
<th> <img src="pic_01.gif" onclick="imageSwap()" alt="" border= height=100 width=100></img> </th>
<td> <img src="pic_02.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_03.gif" alt="" border= height=100 width=100></img></td>
</tr>
<tr>
<td> <img src="pic_04.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_05.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_06.gif" alt="" border= height=100 width=100></img></td>
</tr>
<tr>
<td> <img src="pic_07.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_08.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_09.gif" alt="" border= height=100 width=100></img></td>
</tr>
<tr>
<td> <img src="pic_10.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_11.gif" alt="" border= height=100 width=100></img></td>
<td> <img src="pic_12.gif" alt="" border= height=100 width=100></img></td>
</tr>
</table>
我最终想做的是能够让用户单击一个“随机”图像并将其与另一个“随机”图像交换,以解决难题。任何意见表示赞赏!谢谢!
最佳答案
我认为最好的选择是为每个 img
元素添加一个类(比如说random
):
<img src="pic_10.gif" class="random" alt="" height=100 width=100 />
然后我们可以通过一个简单的querySelectorAll
获取所有图像:
var images = document.querySelectorAll('.random');
随机化 src
数组:
var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc];
srcs = srcs.sort(function() { return Math.random() > 0.5; });
然后迭代图像,将新的 src 应用于每个图像:
for (var i = 0; i < images.length; ++i) {
images[i].src = srcs[i];
}
完整功能是:
var imageSwap = function() {
var images = document.querySelectorAll('.random');
var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc];
srcs = srcs.sort(function() { return Math.random() > 0.5; });
for (var i = 0; i < images.length; ++i) {
images[i].src = srcs[i];
}
};
关于javascript - 打乱图像 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22622307/