如何在避免重复这些图像的同时显示随机背景图像？

Question

我有这个 JS 代码，其中包括（当前）4 个图像的数组和一个选择随机图像的函数：

    const scenes = ['url(scenes/scene1.jpg)', 'url(scenes/scene2.jpg)', 'url(scenes/scene3.jpg)', 'url(scenes/scene1.jpg)'];

    function randomScene() {
        const shuffle = Math.floor(Math.random() * (scenes.length));
        document.getElementById('bg-switch').style.backgroundImage = scenes[shuffle];
    };

然后我有一个 HTML 按钮 - 如果单击它，它会执行“randomScene()”，并显示来自名为“scenes”的数组中的图像。

    <section id="bg-switch">
        <div class="container text-center">
            <a><button type="button" onclick="randomScene()">Click!</button></a>
        </div>
    </section>

问题：我想避免在单击按钮时连续显示同一图像两次。

1. 我想从数组中删除已显示的图像。
2. 我想重置（随机播放？）数组，一旦从数组中删除所有元素，因此单击按钮会继续显示图像。

Answer 1

您可以创建一个变量并将图像路径存储在其中。在每次点击时检查当前图像是否与随机生成的图像相同。如果没有，则将其添加到后台并更新 currImg 变量

const scenes = ['url(scenes/scene1.jpg)', 'url(scenes/scene2.jpg)', 'url(scenes/scene3.jpg)', 'url(scenes/scene1.jpg)'];

let currImg = ''

function randomScene() {
  const shuffle = Math.floor(Math.random() * (scenes.length));
  if (scenes[shuffle] === currImg) {
    randomScene()
  } else {
    document.getElementById('bg-switch').style.backgroundImage = scenes[shuffle];
    currImg = scenes[shuffle]
  }
};

<section id="bg-switch">
  <div class="container text-center">
    <a><button type="button" onclick="randomScene()">Click!</button></a>
  </div>
</section>