从文件夹加载随机图像但不重复使用 javascript math.floor(math.random) 函数答案

【问题标题】：Load random images from folder but without repeat using javascript math.floor( math.random) function从文件夹加载随机图像但不重复使用 javascript math.floor(math.random) 函数
【发布时间】：2021-03-11 13:52:41
【问题描述】：

总的来说，我是 javascript 和 webdev 的新手。我也是stackoverflow的新手。太棒了！

我找到了一个 javascript 代码的 sn-p 代码，它可以很好地实现我想要实现的目标。该脚本显示文件夹中的随机图像，但我需要它不重复图像。

这是脚本。

var random_images_array = ["smile.gif", "frown.gif", "grim.gif", "bomb.gif"];

function getRandomImage(imgAr, path) {
    path = path || "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();
}

我只是不知道如何使它不重复图像。我已经在网上阅读了一些解决方案，但我想我还没有完全掌握并重新创建一个可行的解决方案。

【问题讨论】：

您能分享一下您读到的解决方案吗？只要链接就足够了
这有帮助吗？ stackoverflow.com/questions/12987719/…
这能回答你的问题吗？ JavaScript - How to randomly sample items without replacement?
我认为解决此问题的方法是将生成的数字推送到包含所见数字的数组中，并且每次检查新生成的数字是否在该数组中。如果没有，则创建一个新的随机数，直到获得所需的数字。
看起来你不想要一个随机选择器，而是一个随机器/随机播放器，然后按顺序获取随机播放的图像。

标签： javascript html

【解决方案1】：

选择后从数组中删除图像

var random_images_array = ["smile.gif", "frown.gif", "grim.gif", "bomb.gif"];

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

    /* remove  1 item from index <num> */
    random_images_array.splice(num, 1);

    document.body.innerHTML += imgStr;
    
}

或随机排列数组，每次调用函数时，您只需使用pop() 检索一个元素，直到数组不为空。

【讨论】：

【解决方案2】：

试试这个：每次输出图像时，它都会被添加到 usedImages 数组中，然后在输出新图像之前 - 通过与新数组（usedImages）进行比较来检查是否已被使用

var random_images_array = [
    "smile.gif",
    "frown.gif",
    "grim.gif",
    "bomb.gif",
  ];
  let usedImages = [];
  function getRandomImage(imgAr, path) {
    path = path || "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);
    if (usedImages.includes(imgStr)) {
      console.log("in there");
    } else {
      usedImages.push(imgStr);
      console.log(`Used Images: ${usedImages}`);
    }
    document.close();
  }

【讨论】：