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（）”，并显示来自数组的图像，即“场景”。

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

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

我想从阵列中删除已经显示的图像。
从数组中删除所有元素后，我想重置（随机播放）数组，因此单击按钮将继续显示图像。

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>

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

1 个答案: