Как я могу отображать случайное изображение каждый раз при загрузке определенной веб-страницы? - PullRequest
Новая
       49

Как я могу отображать случайное изображение каждый раз при загрузке определенной веб-страницы?

0 голосов
/ 09 февраля 2019

У меня есть определенная страница, которая является частью веб-сайта;это закодировано непосредственно в HTML.У меня есть четыре изображения, и я хочу отображать случайное из них в определенном месте на этой странице каждый раз, когда кто-либо загружает страницу.

Я пробовал множество примеров;наиболее логичным для меня было иметь функцию, которая возвращала бы случайное целое число от 1 до 4, и тогда я мог бы просто поставить

, так что если бы функция возвращала«2», HTML-код, который будет выполняться, даст мне

Я нашел функции, которые должны обеспечивать случайные 0, 1, 2 или 3, но я не могу заставить этот подход работать.Я не эксперт по программированию, хотя я довольно хорошо разбираюсь в простом HTML.

1 Ответ

0 голосов
/ 09 февраля 2019

Вы можете создать массив изображений, который вы хотели бы использовать, а затем выбрать случайное изображение из этого массива и отобразить его в своем HTML после загрузки DOM.

См. Пример ниже: 

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: 

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" />
...