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];
}

Answer 2

您可以根据当前背景元素以外的所有项目过滤images，并获取结果的随机元素。

这是如何实现这一目标的一个例子：

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];

    var restOfImages = images.filter(function (image) {
      return image !== currentBackgroundImage;
    })

    var random = Math.floor(Math.random() * restOfImages.length);

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

另一种方式，没有filter：

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];

    var restOfImages = [];

    for(var i = 0; i < images.length; i++) {
      if (images[i] !== currentBackgroundImage) {
        restOfImages.push(images[i]);
      }
    }

    var random = Math.floor(Math.random() * restOfImages.length);
    element.style.backgroundImage = restOfImages[random];
}

这是一个有效的小报：

function myAnimation(element) {

    var currentBackgroundImage = element.style.backgroundImage;

    var images = [
      "url(https://place-hold.it/100x100&text=1)",
      "url(https://place-hold.it/100x100&text=2)",
      "url(https://place-hold.it/100x100&text=3)",
      "url(https://place-hold.it/100x100&text=4)",
    ];
    
    var restOfImages = images.filter(function (image) {
      return image !== currentBackgroundImage;
    })

    var random = Math.floor(Math.random() * restOfImages.length);

    element.style.backgroundImage = restOfImages[random];
}

var el = document.getElementById('container');

el.onclick= function() { myAnimation(el); };

#container{
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container"></div>

Answer 3

您可以重复使用Array.splice删除随机元素。

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

element.style.backgroundImage = images.splice(random, 1)[0];

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

3 个答案: