Question

好的，我正在上一篇介绍性的HTML课程。这是我的最后一个项目，我已经咬了更多然后我可以咀嚼。 这只适用于一堂课。没有其他人必须处理它只需要工作的代码。它不会被其他开发人员使用或阅读。

我试图让20张不同的图像随机显示65张不同的图片。这20幅图像在正方形和矩形之间划分。因此，有65个图像是正方形，65个图像是矩形。它们必须随机显示在HTML 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个。当我在网页浏览器中查看页面时，它只是列出了无法找到图像的alt图像名称。任何建议将不胜感激。

Answer 1

我不会给我的一个变量和我的一个函数同名（random）。

另外，使用document.getElementById()选择您的元素。我给了你<img>一些id属性来帮助解决这个问题。

更新了HTML：

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

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

更新了JS：

var random = {
    m: 714025,
    a: 4096,
    c: 150889
};
random.seed = (new Date()).getTime() % random.m;

function generateRandom() {
    random.seed = (random.seed * random.a + random.c) % random.m;
    return random.seed / random.m;
}

function randomizeimage(img, count, base, type) {
    var element = document.getElementById(img);
    element.src = base + Math.floor(generateRandom() * count + 1) + type;
}

randomizeimage('image1', 65, 'squares/', '.jpg');
randomizeimage('image2', 65, 'squares/', '.jpg');

Answer 2

问题出在这里。

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

具体来说，当您执行图像[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');

等

我试图使用JavaScript在HTML页面上随机化图像

2 个答案: