Question

我试图从我的数组中输出一个随机图像，然后将其从数组中删除以进行匹配游戏。我是一般的编程新手，而且我已经看到了（我确定的是）更简单的方法，但我还没有理解，所以我就是这样尝试的。问题是我无法打印出图像，我不确定原因。任何帮助，将不胜感激！谢谢！

HTML

<script>
            printImage(); Sites.splice(r,1); 
</script>

JS

var imgArray = new Array(); 
imgArray[0] = new Image();
imgArray[0].src = 'img0.jpg';
...
imgArray[23] = new Image();
imgArray[23].src = 'img23.jpg';

ImageRotation = imgArray.length;
FirstHalf = '<img src="img';
LastHalf = '.jpg" style="width:100px; height: 100px;">';

function printImage() {
var r = Math.ceil(Math.random() * ImageRotation);
document.write(FirstHalf + r + LastHalf);
}

Answer 1

这就是你如何做到你想要实现的目标：

我已使用setInterval进行演示。

Fiddle

HTML：

<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />

的JavaScript：

var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];

setInterval(function() {
    var im = document.getElementsByTagName('img')[0];
    im.src = imgs[Math.round(Math.random() * (imgs.length - 1))];
}, 1000);

Answer 2

这是设置图像的另一种方法，基于@ chipChocolate.py的答案，并解决了OP要求从列表中删除每个图像的要求。它不是更改HTML中的第一个图像，而是在<div>容器中重写内部HTML。

<html>
<head>
<script type="text/javascript">
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
var pictures = imgs.length;
var picim =[];
for (var i=0; i<pictures; i++)
    picim [i] = i;
var num = 0;            // current index of picture number

function randpic() {
    if (pictures > 1) {
        pictures--;
        for (var i=num; i<pictures; i++)   // remove current picture index
            picim[i] = picim[i+1];
        num = Math.floor(Math.random() * pictures);
        var content = '<IMG src="' + imgs[picim [num]] + '" />';
        document.getElementById('randpic').innerHTML = content;
        }
}
</script>
</head>

<body>
<div id="randpic" onClick="javascript:randpic()">
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
</div>
</body>
</html>

使用JS从数组中输出随机图像

2 个答案:

Fiddle

HTML：

的JavaScript：