Question

在网站上，当有人点击按钮时，我想要显示随机图片。图片的URL包含在数组中的javascript文件中。它现在工作正常，但我想这样做，以便一旦图片出现，它就不会再出现，直到阵列中的所有其他项目出现。换句话说，我不希望任何图片出现两次，直到阵列中的所有图片都完成。我将如何添加到下面的代码中？

var images = 
["sample1.png", 
"sample2.png", 
"sample3.png", 
"sample4.png", 
"sample5.png", 
"sample6.png", 
"sample7.png"];
var rand = images[Math.round(Math.random() * (images.length - 1))];

function test(){
rand = images[Math.round(Math.random() * (images.length - 1))];
document.getElementById("picture").style.background = "url('/images/"+rand+"') no-repeat center center";
}

Answer 1

你可以像这样使用它，

跟踪哪些可能性仍然存在，并在没有新的可能性的情况下重置。

在这种情况下，我使用了一个字符串数组，但原理是相同的：）

jsfiddle：http://jsfiddle.net/D3XSY/

var messages = ['hello', 'there', 'this', 'is', 'a', 'test'];
var available = [].concat(messages);
var interval;

function update(id) {
    if (available.length === 0) {
        available = [].concat(messages);
    }
    var ri = Math.floor(Math.random() * available.length);
    var msg = available[ri], el = document.getElementById(id);
    if (el) {
        el.innerHTML = msg;
    }
    available.splice(ri, 1);
}

interval = setInterval(update.bind(null, 'promo'), 500);

Answer 2

你可以做点什么like this fiddle

基本上保留可用图像的运行列表，并在使用完所有图像后重置它。

var defaultImages = ["sample1.png", "sample2.png", "sample3.png", "sample4.png", "sample5.png", "sample6.png", "sample7.png"],
    availImages = [],
    randomImage = '',
    button = document.getElementById('testButton');

button.onclick = test;

function test()
{
    if(availImages.length == 0)
            availImages = defaultImages.slice(0);

    randomImage = availImages[Math.floor(Math.random() * availImages.length)];

    var index = 0;
    for(indexLength = availImages.length; index < indexLength; index++)
    {
        if(availImages[index] == randomImage)
            break;
    }

    availImages.splice(index, 1)
    console.log(randomImage);
}

我怎样才能这样做，一旦使用数组中的值，它就不能再次使用，直到数组完成？

2 个答案: