JavaScript 中的随机图像生成器

在本章中，您将学习如何使用 JavaScript 在网页上生成随机图片。因此，我们将使用 JavaScript 和 HTML 源代码创建不同的随机图片生成器。首先，需要一个数组来包含将在网页上显示的图片的 URL。

随机图片生成器的概念主要用于广告。您在网站上看到的随机生成的图片已经存储在数据库或数组中。这些图片会在规定的时间间隔内显示给用户，或者通过点击来更改。您也可以直接从互联网上提供图片的地址。

我们将讨论两种不同的方法来使用 JavaScript 进行随机图片生成。请参阅下面的两种方法

方法 1

在此方法中，通过单击按钮，图片将以固定的时间间隔开始在网页上随机显示。我们将使用 JavaScript 的内置函数 setInterval() 来设置图片显示之间的时间间隔。

在此示例中，我们使用了图片的原始尺寸。您也可以为要显示的每张图片定义尺寸。现在，请按照以下步骤操作

随机图片生成器的步骤

• 使用 JavaScript 声明一个数组来存储图片。
• 在声明的数组中提供图片的链接或 URL。您也可以在数组中为要显示在网页上的图片尺寸传递高度和宽度。
• 声明一个 JavaScript 变量来存储使用 floor(Math.random()*randomImage.length) 方法计算出的随机值。它将生成一个介于 0 和数组长度之间的随机数，该随机数将分配给要随机显示的图片。
• 现在，返回使用上一步计算出的数字选择的随机图片。
• 将以上所有步骤放入一个用户定义的函数 (getRandomImage) 中，该函数将在单击 生成图片 按钮时调用
• 在 HTML 代码中，我们将使用一个标签并提供一个 ID 来将一个图片显示在另一个图片之上。因此，图片将一张一张地显示，相互覆盖。

将这些步骤转换为实际实现。

复制代码

输出

通过执行此代码，将出现一个带有 生成图片 按钮的网页。当您单击此按钮时，图片将开始在网页上随机显示。

单击 生成图片 按钮可显示一张随机生成的图片。一旦单击 生成图片 按钮，这些图片将在几秒钟内自动更改。

请参阅下面的输出

“请注意，我们是从互联网上提供了数组中的图片地址。我们没有下载或将这些图片存储在我们的数据库中”。

示例 2：生成多张随机图片

在此示例中，当用户单击按钮时，我们将一次生成并显示多张随机图片。我们将使用 HTML 代码创建一个名为“生成图片”的按钮。这些图片将存储在用户选择的数组中。每次用户单击 生成图片 按钮时，将批量生成并显示五张随机图片到网页上。

请参阅下面的步骤，了解如何完成此操作

• 使用 JavaScript 声明一个数组，并在该数组中提供图片的链接或 URL 来存储图片。
• 使用 for 循环一次生成多张随机图片。我们将使用从 0 到 5 的 for 循环来在一次按钮单击中显示五张图片。
• 将以下步骤放入此 for 循环中。
• 使用 floor(Math.random()*randomImage.length) 方法计算一个介于 0 和数组长度之间的随机数。生成的数字将分配给要随机显示的图片。
• 现在，打印使用上一步计算出的数字选择的所有五张随机图片。
• 将以上所有步骤放入一个用户定义的函数 (getRandomImage) 中，该函数将在单击 生成图片 按钮时调用

将这些步骤转换为实际实现，并查看下面的代码

复制代码

输出

运行上面的代码，您将收到带有 生成图片 按钮的响应。最初，将没有图片。

当您单击 生成图片 按钮时，将随机选择的五张图片将显示在网页上。

再次单击 生成图片 按钮，将再次随机显示五张图片，并附带之前的输出。

方法 2

在此方法中，我们将在每次单击按钮时显示随机图片。这些图片不会像前一种方法那样自动更改。

在此示例中，我们还将为要显示在网页上的每张图片提供尺寸（高度和宽度）。因此，图片将以您在 JavaScript 代码中指定的尺寸显示。

随机图片生成器的步骤

• 创建一个用户定义的函数 randomImageGenerator() 并将以下所有步骤放入其中。
• 使用 JavaScript 创建一个图片数组，其中包含要在网页上显示的图片的路径/URL、高度和宽度。
• 将图片的 URL、高度和宽度存储在另一个数组索引中。
• 使用 floor() 方法生成一个随机数，该随机数将用于在网页上随机显示图片数组。它将生成一个介于 0 和数组长度之间的随机数，该随机数将分配给要随机显示的图片。
• 显示索引号与上一步生成的随机数匹配的图片。
• 我们将使用一种方法删除上一张图片并用新图片覆盖。
• 在 HTML 中创建一个按钮来更改图片。

将这些步骤转换为实际实现，并查看下面的代码

复制代码

输出

通过执行此代码，将出现一个带有 显示图片 按钮的网页。单击此按钮即可生成一张图片。

单击 显示图片 按钮后，一张图片将随机显示。

每次单击 显示图片 按钮时，都会显示一张新图片。

我们将逐步解释上述 JavaScript 代码，以便更容易理解。

声明并初始化一个数组

声明一个数组并存储要显示在网页上的图片的地址、高度和宽度。

将图片 URL、高度和宽度存储到另一个数组索引

此代码用于将图片的 URL、高度和宽度存储到另一个数组索引中，以便轻松访问它们。因此，我们将找到初始数组的长度并将它们的元素传输到另一个新数组。

生成一个随机数

这将生成一个介于 0 和数组长度之间的随机数。

删除上一张图片

此代码用于从网页中删除上一张图片，以便可以显示新图片。

显示图片

最后，我们使用此代码在删除上一张图片后显示图片。