Question

我有一个属于网站的特定页面；它直接用HTML编码。我有四张图片，并且每次有人加载该页面时，都希望在该页面的特定位置随机显示其中一张。

我尝试了很多例子；对我来说，最合乎逻辑的方法是拥有一个可以返回1-4中随机整数的函数，然后我可以简单地输入

因此，如果函数碰巧返回“ 2”，则将执行的HTML会给我

我发现应该提供随机0、1、2或3的函数，但是我无法使用这种方法。我不是编程专家，尽管我在简单的HTML方面很出色。

Answer 1

您可以创建要使用的图像数组，然后从该数组中选择随机图像，并在DOM加载后将其显示为HTML。

请参见以下示例：

const images = ["https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80", 
"https://images.unsplash.com/photo-1519834785169-98be25ec3f84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
];

document.addEventListener('DOMContentLoaded', _ => {
  const randImageIndex = ~~(Math.random() * images.length);
  document.getElementById('randImg').src = images[randImageIndex];
});

img {
  width: 50%;
  height: auto;
}

<h1>My random image website</h1>
<h3>Take a look around</h3>

<img id="randImg" src="" alt="Random image" />

<p>This is some text</p>

只有在您的HTML中希望随机化一幅图像的情况下，以上内容才有效；如果您希望将多幅图像随机化，则可以使用以下图像，只需将您希望对图像进行随机化的类randImg：< / p>

const images = ["https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
"https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80", 
"https://images.unsplash.com/photo-1519834785169-98be25ec3f84?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
];

document.addEventListener('DOMContentLoaded', _ => {
  [...document.getElementsByClassName('randImg')].forEach(e => {
    const randImageIndex = ~~(Math.random() * images.length);
    e.src = images[randImageIndex];
  }); 
});

img {
  width: 50%;
  height: auto;
}

<h1>My random image website</h1>
<h3>Take a look around</h3>

<img class="randImg" src="" alt="Random image" />

<p>This is some text1</p>
<img class="randImg" src="" alt="Random image" />
<p>This is more text2</p>
<img class="randImg" src="" alt="Random image" />

每次加载特定网页时如何显示随机图像？

1 个答案: