javascript - 我正在尝试使用 JavaScript 随机化 HTML 页面上的图像

Question

好的，我正在参加 HTML 入门类(class)。这是我的最后一个项目，我已经咬得太多了。 这仅适用于一个类(class)。没有其他人需要处理它的代码，所以它只需要工作即可。其他开发者不会使用或读取它。

我正在尝试让 20 个不同的图像随机显示 65 个不同的图片。这 20 个图像分为正方形和矩形。因此，有 65 个正方形图像和 65 个矩形图像。它们必须随机显示在 mu HTML 正文中的 20 个图像中。

这是我标题中的 JavaScript 代码:

<script language="JavaScript">
 random.m=714025; random.a=4096; random.c=150889;
 random.seed = (new Date()).getTime()%random.m;
 function random()
 {
 random.seed = (random.seed*random.a + random.c) % random.m;
 return random.seed / random.m;
 }

 function randomizeimages()
 {
 randomizeimage('image1', 65, 'squares/', '.jpg');
 randomizeimage('image2', 65, 'squares/', '.jpg');
 randomizeimage('image3', 65, 'rectangles/', '.jpg');
 randomizeimage('image4', 65, 'squares/', '.jpg');
 randomizeimage('image5', 65, 'rectangles/', '.jpg');

 randomizeimage('image6', 65, 'squares/', '.jpg');
 randomizeimage('image7', 65, 'rectangles/', '.jpg');
 randomizeimage('image8', 65, 'squares/', '.jpg');
 randomizeimage('image9', 65, 'rectangles/', '.jpg');
 randomizeimage('image10', 65, 'squares/', '.jpg');

 randomizeimage('image11', 65, 'rectangles/', '.jpg');
 randomizeimage('image12', 65, 'rectangles/', '.jpg');
 randomizeimage('image13', 65, 'squares/', '.jpg');
 randomizeimage('image14', 65, 'squares/', '.jpg');
 randomizeimage('image15', 65, 'squares/', '.jpg');

 randomizeimage('image16', 65, 'rectangles/', '.jpg');
 randomizeimage('image17', 65, 'squares/', '.jpg');
 randomizeimage('image18', 65, 'squares/', '.jpg');
 randomizeimage('image19', 65, 'rectangles/', '.jpg');
 randomizeimage('image20', 65, 'squares/', '.jpg'); 
 }

 function randomizeimage(img, count, base, type)
 {
 document.images[img].src = base + Math.floor(random() * count + 1) + type
 }
 </script> 

这是处理 HTML 正文中图像的代码部分。由于篇幅原因，我只会列出 20 个中的前 5 个。

<div id="shape1">
<img name="image1" src="squares/2.jpg" alt="Square 1" width="162" height="162" />
</div>

 <div id="shape2">
<img name="image2" src="squares/3.jpg" alt="Square 2" width="162" height="162"   />
</div>

 <div id="shape3">
<img name="image3" src="rectangles/2.jpg" alt="Rectangle 1" width="324" height="162"   />
</div>

 <div id="shape4">
<img name="image4" src="squares/4.jpg" alt="Square 3" width="162" height="162"   />
</div>

 <div id="shape5">
<img name="image5" src="rectangles/3.jpg" alt="Rectangle 2" width="324" height="162"   />
</div>

等等。还有 15 个图像，总共 20 个。当我在网络浏览器中查看页面时，它只是列出了替代图像名称，就像找不到图像一样。任何建议将不胜感激。

Answer 1

问题就出在这里。

document.images[img].src = base + Math.floor(random() * count + 1) + type

具体来说，当您执行 images[img] 时，您会尝试通过图像名称访问图像，但这是行不通的。 images 是一个数组，您需要通过其索引访问该数组。

所以你可以这样做

function randomizeimage(index, count, base, type)
{
    document.images[index].src = base + Math.floor(random() * count + 1) + type
}

并将您的调用代码更改为此

randomizeimage(0, 65, 'rectangles/', '.jpg');
randomizeimage(1, 65, 'rectangles/', '.jpg');
randomizeimage(2, 65, 'rectangles/', '.jpg');

等等