Где мои настройки и вызов функции массива случайных чисел происходит неправильно? - PullRequest
Новая
       41

Где мои настройки и вызов функции массива случайных чисел происходит неправильно?

0 голосов
/ 01 апреля 2020

Я могу l oop функцию для отображения 5 случайных изображений . Теперь я хочу использовать те же 5 изображений и перетасовать их, где каждое изображение появляется только один раз (с 5! = 120 перестановками).

Я нашел множество советов о том, как перемешивать и отображать случайные числа ( не изображения), но я думаю, что моя проблема в настройке и последующем вызове функций. Как мне это сделать?

Допущения:

  1. Между моими тегами <style> мне нужно определить функцию перетасовки
  2. Массив изображений может оставаться неизменным есть (так как это те же самые, ясно проверяя, чтобы обновлять любые измененные ссылки из нового URL)
  3. Функция shuffle вызывается в теле моей страницы (я не уверен насчет этого бита)

На простом английском языке sh Я пытаюсь достичь:

"Возьмите пять изображений из коллекции и поместите их, только один раз, в любой порядок."

Что происходит:

Появляются пять изображений, часто изображения повторяются.

Успешная веб-страница имеет следующее: 

    </style>
<script type="text/javascript">
// place your images in this array
var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function getRandomImage(imgAr, path) {
    path = path || '../Public/images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>
</head>
<body>

И затем это (что, я полагаю, вызов функции) 

<div>
    <!-- This script segment displays an image from the array -->
    <script type="text/javascript">for (i = 0; i < 5; i++) getRandomImage(random_images_array, 'images/')</script>
</div>

Как это исправить?

Ответы [ 2 ]

1 голос
/ 01 апреля 2020

Следующее перемешивает массив URL-адресов изображений, а затем добавляет эти URL-адреса как изображения в DOM, один за другим. 

const $ = document.querySelector.bind(document)

function shuffle(arr) {
  for (let curr = arr.length - 1; curr >= 0; --curr) {
    const random = ~~(Math.random() * curr)
    ;[arr[random], arr[curr]] = [arr[curr], arr[random]]
  }
  return arr
}

function render(arr) {
  let html = "";
  for (let el of arr) {
    html += img`${el}`
  }
  $("#images").innerHTML = html
}

function img(_, url) {
  return `<img style="background:url(${url}); background-size:cover;"/>`
}

const arr = [
 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX//wCKxvRFAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUA/wA0XsCoAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg=="
]

$("button").addEventListener("click", () => render(shuffle(arr)))

render(shuffle(arr))
body {
  font-family: sans-serif;
  font-size: 0;
}
img {
  display: inline-block;
  width: 170px;
  height: 60px;
  box-shadow: 0 0 0 2px white inset;
  padding: 0;
  margin: 0;
}
button:focus { outline: none }
button {
  font-size: 1rem;
  border: none;
  background: rgb(0, 200, 200);
  border-radius: 5px;
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  width: 340px;
  padding: 0;
  margin: 0;
  color: white;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  box-shadow: 0 0 0 2px white inset;
}
#images {
  box-shadow: 0 0 0 2px silver inset;
  width:340px;
  height:120px;
}
<button>Shuffle!</button>
<section id="images"></section>
0 голосов
/ 01 апреля 2020

Добрый комментатор, который удалил свой ответ, дал мне следующее: 

    var random_images_array = ['Weare.jpg', 'Always.jpg', 'There.jpg', 'For.jpg', 'You.jpg'];

function shuffleArray(arr) {
   for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
   }
}

// Shuffle images here
shuffleArray(random_images_array);

function getRandomImage(imgAr, path) {
   path = path || '../Public/images/'; // default path here
   for (var i = 0; i < imgAr.length; i++) {
      var img = imgAr[i];
      var imgStr = '<img src="' + path + img + '" alt = "">';
      document.write(imgStr);
      document.close();
   }
}

getRandomImage(random_images_array, 'images/')

И это сработало! Спасибо, тайный помощник!

...