Question

我想将随机选择的图像放到5个单元格中。我怎么能只使用JS？

我有这张桌子。

<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放入一个数组中，然后使用数组长度作为最大值的随机数生成器。然后，您可以将随机数与数组的索引相匹配。

如何在没有JQ的情况下随机将图像放入单元格？

1 个答案: