javascript - 没有JQ如何将图像随机放入单元格？

Question

我想将随机选择的图像放入 5 个单元格中。 我如何仅使用 JS 来做到这一点？

我有这张 table 。

<table border="1">
<tr>
    <td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td>
</tr>

<tr>
        <td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td>
</tr>

<tr>
    <td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td>
</tr>

</table>    

Answer 1

你想要做的是这样的:

首先，找出要放入图像的五个单元格。为此，请使用随机数生成器和五个不同的变量，生成数字时检查是否尚未分配。

var firstNumber = Math.floor(Math.random()*27);
var secondNumber= Math.floor(Math.random()*27);
var thirdNumber = Math.floor(Math.random()*27);
var fourthNumber= Math.floor(Math.random()*27);
var fifthNumber = Math.floor(Math.random()*27);

其次，获取这些单元格的 ID

var pic1 =document.getElementById(firstNumber)
var pic2 =document.getElementById(secondNumber)
var pic3 =document.getElementById(thirdNumber)
var pic4 =document.getElementById(fourthNumber)
var pic5 =document.getElementById(fifthNumber)

第三次附加图像。

pic1.innerHTML = "<img src='something.gif'/>'"
pic2.innerHTML = "<img src='something.gif'/>'"
pic3.innerHTML = "<img src='something.gif'/>'"
pic4.innerHTML = "<img src='something.gif'/>'"
pic5.innerHTML = "<img src='something.gif'/>'"

我故意省略了将随机生成的数字相互比较以检查它们是否已被使用的部分。如果您需要这方面的帮助，请告诉我们。

还有很多方法可以改进这一点，例如您可以将所有变量放入一个数组中并循环遍历它们。这只是为了让您了解如何做到这一点的基本想法。

有人指出没有 26 个不同的选项，而且数字也不会按顺序攀升，这是另一个建议的解决方案: 将所有可能的 id 放入一个数组中，然后以数组的长度为最大值进行随机数生成。然后您可以将随机数与数组的索引进行匹配。