Question

如何在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>

Answer 1

您声明了该功能，但您没有调用它。此外，您必须使用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。

Answer 2

您正在创建一个数组，然后将该相同的变量指定为字符串值，它不再是数组。

尝试这样的事情：

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>

Answer 3

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

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;
}

Answer 4

显示随机图片的随机数（最多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/

如何使用Math.random发布图像

4 个答案:

HTML

的Javascript

的jsfiddle