Question

我有此功能，可以显示从文件夹中选取的两个随机图像。我是否有可能修改代码，以免两次出现相同的图像？

谢谢。

var theImages = new Array()

theImages[0] = 'img/dyptichs/f-1.jpg'
theImages[1] = 'img/dyptichs/f-2.jpg'
theImages[2] = 'img/dyptichs/f-3.jpg'
theImages[3] = 'img/dyptichs/f-4.jpg'
theImages[4] = 'img/dyptichs/f-5.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var WI1 = Math.round(Math.random()*(p-1));
var WI2 = Math.round(Math.random()*(p-2));

function showImage1(){
document.write('<img src="'+theImages[WI1]+'">');
}
function showImage2(){
document.write('<img src="'+theImages[WI2]+'">');
}

Answer 1

您可以执行以下操作：

var WI1 = Math.round(Math.random()*(p-1));
var WI2 = Math.round(Math.random()*(p-1));
while (WI2 === WI1) {
    WI2 = Math.round(Math.random()*(p-1));
}

我们一直在生成一个新号码，直到它与WI1不同为止，以确保它是唯一的。

Answer 2

我个人处理的方法是将数组随机化，然后仅获取前2个条目。这样，您仍然可以随机选择2，但是保证不会得到相同的2。

var theImages = new Array()

theImages[0] = 'img/dyptichs/f-1.jpg'
theImages[1] = 'img/dyptichs/f-2.jpg'
theImages[2] = 'img/dyptichs/f-3.jpg'
theImages[3] = 'img/dyptichs/f-4.jpg'
theImages[4] = 'img/dyptichs/f-5.jpg'

var randomImages = theImages
    .concat()
    .sort(function () {

        return Math.random() > 0.5
            ? 1
            : -1;

    })
    .slice(0, 2);

function showImage1() {
    document.write('<img src="' + randomImages[0] + '">');
}

function showImage2() {
    document.write('<img src="' + randomImages[1] + '">');
}

编辑：包括用于完整解决方案的原始阵列

Answer 3

var WI1 = Math.floor(Math.random()*p);
var WI2 = Math.floor(Math.random()*(p-1));
if (WI2 >= WI1) {
  WI2 += 1;
}

使用floor而不是round并减去1，因为使用round可以使获得第一个或最后一个元素的机会减少两倍。

在这种情况下，if技巧比循环要好一些，尽管该循环更容易应用于更复杂的情况。

2张随机图片，但不是同一张图片

3 个答案: