0

我如何发布 X 数量的图像，其中 X = 随机数。在这个例子中，我设置了 X=10

<input class="randombutton" type="button" value="Randomize" onclick="randomImg1" />

<script type="text/javascript">
    function randomImg1() {

        myImages1 = new Array();
        for (var i = 0; i < 10; i++){
        myImages1.push("MyImage" + i + ".jpg");
}

        var rnd = Math.floor(Math.random() * 10);

document.getElementById("image").innerHTML = "<img src='" + myImages1[rnd] + "' alt='image' />";
}
    randomImg1();
</script>
<div id="image"></div>
</body>
</html>
4

4 回答 4

0

显示随机数（最多 10 个）的随机图像：

HTML

<div id="random-image-container"></div>

Javascript

var numberOfImages = Math.floor(Math.random() * 10);

var imageContainer = document.getElementById('random-image-container');

for (var i = 0; i < numberOfImages; i++)
{
    var randomImage = 'http://placekitten.com/' + Math.floor(Math.random() * 200) + '/' + Math.floor(Math.random() * 200);
    imageContainer.innerHTML += '<img src="' + randomImage + '" />';
}

JSFiddle

http://jsfiddle.net/ZZThe/

于 2013-08-06T12:50:03.983 回答
0

您正在搜索的内容（如果我理解正确的话）如下：

function randomImg1() {
    var imageAmount = Math.random() * 10;
    var imagesHTMLBuffer = "";

    var imagePath;
    for (var i = 0; i < imageAmount; i++)
    {
        imagePath = "MyImage" + i + ".jpg";
        imagesHTMLBuffer += '<img src="' + imagePath + '" alt="image" />';
    }

    document.getElementById("image").innerHTML = imagesHTMLBuffer;
}
于 2013-08-06T12:37:32.543 回答
0

你声明了这个函数，但你没有调用它。此外，您必须使用Array.prototype.push而不是=添加元素：

<!DOCTYPE html>
<html>
<body>

<input class="randombutton" type="button" value="Randomize" />

<script type="text/javascript">
    function randomImg1() {

    myImages1 = new Array();
    myImages1.push("MyImage.jpg");
    var rnd = Math.floor( Math.random() * 10 );

    document.getElementById("image").innerHTML = "<img src='" + myImages1[rnd] + "' alt='image'></img>";
}
    randomImg1();
</script>
<div id="image"></div>
</body>
</html>

仅供参考，在大多数情况下这仍然不起作用的可能性很高，因为您的数组只有 1 个元素，但是1 <= rnd <= 10.

于 2013-08-06T10:15:58.687 回答
0

您正在创建一个数组，然后为该变量分配一个字符串值，它不再是一个数组。

尝试这样的事情：

myImages1 = new Array();

for (var i = 0; i < 10; i++)
{
    myImages1.push("MyImage" + i + ".jpg");
}

var rnd = Math.floor(Math.random() * 10);

document.getElementById("image").innerHTML = "<img src='" + myImages1[rnd] + "' alt='image' />";

您还需要连接按钮来调用此函数，可以按如下方式完成：

<input class="randombutton" type="button" value="Randomize" onclick="randomImg1" />

完整的测试代码：

<html>
    <head>
        <script type="text/javascript">
            function randomImg1()
            {
                myImages1 = new Array();

                for (var i = 0; i < 10; i++)
                {
                    myImages1.push("MyImage" + i + ".jpg");
                }

                var rnd = Math.floor(Math.random() * 10);

                document.getElementById("image").innerHTML = "<img src='" + myImages1[rnd] + "' alt='image' />";
            }
        </script>
    </head>
    <body>
        <input class="randombutton" type="button" value="Randomize" onclick="randomImg1()" />

        <div id="image"></div>
    </body>
</html>
于 2013-08-06T10:16:57.407 回答