javascript - 从数组中提取非重复的随机图像

Question

我已经在论坛上彻底搜索了这个问题的解决方案，但没有成功。希望有人能在这里帮助我。

我有一个没有背景图片的空 div。当用户点击它时，我有一个函数可以像这样设置背景图片:

function myAnimation(element) {

    var images = ["url(images/pig.png)", "url(images/cat.png)", "url(images/frog.png)", "url(images/dog.png)"];

    var random = Math.floor(Math.random() * 4);

    element.style.backgroundImage = images[random];
}

虽然这可行，但我遇到的问题是找到用户再次单击图像时的解决方案。由于只生成了四个可能的数字，因此我不断从 var random 方法中得到一个重复数字。我想我需要一种方法来检查最后生成的数字，如果相同，它应该尝试生成一个不同的数字。这样就不会有重复的图像。希望这是有道理的。如您所知，我是编程新手，最近 3 个月才学习 Javascript。我想我可能需要一个循环或此函数内的另一个函数，不确定。

Answer 1

我正在用生成的随机数检查 prevNo。如果两者相同，则再次调用该函数。否则将随机数分配给 prevNo 并加载图像。

var prevNo = -1;
function myAnimation(element) {
    var images = ["url(images/pig.png)", "url(images/cat.png)", "url(images/frog.png)", "url(images/dog.png)"];

    var random = Math.floor(Math.random() * 4);
    if( random == prevNo) { 
        myAnimation(element);
        return;
    } else {
        prevNo = random;
    }
    element.style.backgroundImage = images[random];
}