如何从javascript中设置的图像中选择随机图像答案

【问题标题】：How to choose random image from image set in javascript如何从javascript中设置的图像中选择随机图像
【发布时间】：2023-03-12 06:47:02
【问题描述】：

我一直在使用以下代码生成随机图像，但没有显示任何图片。

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array() 

theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'



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 whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write(theImages[whichImage]);
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</body>
</html>

提前感谢您的帮助！

【问题讨论】：

您在 'document.write' 调用中缺少 src="" 的结束引号和 img 标记 ('/>') 的结尾
这些天人们不打扰结束行吗？;
@Wezly 他们为什么要这样做？
你的 javascript Chuck 的许多行。 @Ian我不知道，我问的原因-我仍然没有良好的习惯，我写的其他语言更加挑剔并且需要它们。我想这只是一个好习惯..
@jascha 当他们将return true 拆分为多行时，事物中断，分号与否。我认为分号也不会促使说的菜鸟不拆分回报。

标签： javascript random image

【解决方案1】：

您已经在数组中有 full <img> 标记。所以只需使用：

document.write(theImages[whichImage]);

虽然我建议不要使用document.write。当然，在您的情况下，它在 HTML 中间执行，我认为问题不大。如果在呈现页面后执行document.write，那就太糟糕了。通常，首选方法类似于appendChild 方法，甚至设置innerHTML，尽管需要一些重构才能让您的代码使用它们。

这是我如何设置的示例：

(function () {
    var theImages = [{
        src: "http://www.techinasia.com/techinasia/wp-content/uploads/2009/12/smile.png",
        width: "675",
        height: "467"
    }, {
        src: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdcHlJqgIKNOS0DaEjO31xK1zYtmJlza8z70ljiKFbo2ZgLdh9eA",
        width: "1084",
        height: "732"
    }, {
        src: "http://cdn2-b.examiner.com/sites/default/files/styles/large_lightbox/hash/68/d1/68d11ab242d40c8d5abbe8edb58fd4ed_0.jpg?itok=M3qtK47_",
        width: "200",
        height: "200"
    }];

    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();

window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};

演示： http://jsfiddle.net/wFjGv/

此代码使用一个新对象来保存每个图像的详细信息。这样，您可以轻松设置和获取所需的每个图像的属性，而无需对 HTML 进行硬编码。

它预加载preBuffer数组中的图像，并在需要时从数组中检索图像，并放入<body>。您可以在onload 事件中更改其目标。 getRandomImage 函数从该数组返回一个随机图像。我也更新了获取随机整数的方法。

【讨论】：

我把它改成了 document.write(theImages[whichImage]);但它仍然无法正常工作，不过感谢您的帮助。
@ChuckNorris 它应该可以正常工作。无论如何，我在我将如何处理它的答案中添加了代码，它似乎更有条理并且工作得更好。

【解决方案2】：

您正在设置 <img src= 不是您想要的东西。您的数组 (theImages) 正在存储完整的 <img> 标签，而不仅仅是指向该图像的链接。

要么改变你theImages 数组来存储值，像这样：

theImages[0] = "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png"

或者使用当前设置作为图片标签。

document.write(theImages[whichImage]);

还有：

对于随机数，您可能应该坚持使用Math.floor()，以免你四舍五入你的最大长度。
var j = 0 缺少;
theImagesimg 标签未关闭（<img ... />

【讨论】：

【解决方案3】：

试试这个-

var srcs = [
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png",
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png",
    "foo/bar.jpg"
    ], imgs = [];
function init() {
    "use strict";
    var i, x, div;
    div = document.createElement('div');
    div.id = 'imageContainer';
    document.querySelector('body').appendChild(div);
    for (i = 0; i < srcs.length; i += 1) {
        x = new Image();
        x.src = srcs[i];
        imgs.push(x);
    }
}
function showRandom() {
    "use strict";
    document.querySelector('#imageContainer').innerHTML = imgs[Math.random * imgs.length];
}
init();

添加随机图像-

showRandom();

PS - 你不应该使用document.write，但如果你这样做了，你应该通过document.close关闭流，告诉浏览器完成页面加载。 Read more - MDN JS Docs

【讨论】：