Question

我正在创建一个随机图像生成器，可在单击按钮时显示图像。我试图通过使连接到每个图像的随机数增加1来防止相同的图像连续显示两次（如果重复的话（换句话说，将显示下一个图像而不是相同的图像两次）。我正在尝试使用if语句来实现这一点但是我的代码似乎有一个小故障，因为同一个图像仍然不止一次显示。不确定问题出在哪里。有解决方案吗？谢谢

document.getElementById('ranImgBtn').onclick = function() {

var ranImgDis = document.getElementById('ranImgDis');
  ranImgDis.style.width = '300px';
  ranImgDis.style.height = '200px';

var pic1 = href="http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg";
var pic2 = href="http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg";
var pic3 = href="http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg"; 

var num = Math.floor(Math.random() * (3 - 1 +1)) + 1;

if(num !== 2 && num !== 3) {
      if(ranImgDis.src !== pic1) {
        ranImgDis.src = pic1; 
      } ranImgDis.src = pic2; 
} else if (num !== 1 && num !== 3) {
      if(ranImgDis.src !== pic2) {
      ranImgDis.src = pic2;
      } ranImgDis.src = pic3;
} else if (num !== 1 && num !== 2) {
      if(ranImgDis.src !== pic3) {
      ranImgDis.src = pic3;
    } ranImgDis.src = pic1;
} 
}

Answer 1

您在所有内部else语句中都缺少if。结果是，即使执行了if语句中的代码，它之后的代码也会始终执行，并替换if语句中的代码。

您的代码如下：

if(ranImgDis.src !== pic1) {
  ranImgDis.src = pic1; 
} ranImgDis.src = pic2;

应该是：

if(ranImgDis.src !== pic1) {
  ranImgDis.src = pic1; 
} else {
  ranImgDis.src = pic2;
}

通过将图像放在数组中，可以使代码更简单，更灵活，并保留当前图像的索引，而不是检查图像的来源。您可以在创建随机数时使用数组的长度，然后只需向代码中添加更多图像而无需更改代码中的任何其他内容。

var pics = [
  "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg".
  "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
  "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg"
];

var current = 0;

document.getElementById('ranImgBtn').onclick = function() {

  var ranImgDis = document.getElementById('ranImgDis');
  ranImgDis.style.width = '300px';
  ranImgDis.style.height = '200px';

  // get a random number within a range one less than the number of images
  var num = Math.floor(Math.random() * (pics.length - 1)) + 1;
  // use the random number to pick a different image from the current one
  current = (current + num) % pics.length;

  ranImgDis.src = pics[current]; 

}

Answer 2

为什么不改变逻辑升技。将图像重命名为1到3之间的数字。比生成1到3之间的随机数，如果该随机数与当前加载的图像相同，则重新生成数字，即使您将图像从3添加到有限限制，该逻辑也会帮助您。

Answer 3

你的逻辑有点混乱，还有一些明显的问题，如：

if(ranImgDis.src !== pic1) {
    ranImgDis.src = pic1; 
} ranImgDis.src = pic2;

这将在一天结束时无条件地将ranImgDis.src设置为pic2。所以也许你应该考虑一下。我建议你保持一个数组，以避免欺骗。

Answer 4

这样就行了，让你将图像数量扩展到三个以上。

document.getElementById('ranImgBtn').onclick = function() {
  var ranImgDis = document.getElementById('ranImgDis');
    ranImgDis.style.width = '300px';
    ranImgDis.style.height = '200px';

    var pics = [ 
        "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
        "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
        "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg"
    ]

    var currentSrc = document.getElementById('ranImgDis').src
    var newSrc = currentSrc

    while (newSrc == currentSrc) {
        newSrc = pics[Math.floor( Math.random() * pics.length )]
    }

    ranImgDis.src = newSrc
}

它在http://jsfiddle.net/X7HM2/

的JSFiddle

javascript中的多个if语句不能正常运行

4 个答案: