如何在javascript中生成随机图像？_Javascript_Random_Image

如何在javascript中生成随机图像？

javascript random image

如何在javascript中生成随机图像？,javascript,random,image,Javascript,Random,Image,我一直在使用下面的代码生成随机图像，但是没有一张图片显示出来 <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-

我一直在使用下面的代码生成随机图像，但是没有一张图片显示出来

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


var theImages=新数组（）
图像[0]=“0”
图像[1]=“1”
图像[2]=''
图像[3]=''
var j=0
var p=图像长度；
var preBuffer=新数组（）
对于（i=0；i


提前感谢您的帮助
 您已经拥有了完整的
演示：
此代码使用一个新对象来保存每个图像的详细信息。这样，您就可以轻松地设置和获取所需的每个图像的属性，而无需硬编码HTML
它将图像预加载到preBuffer
数组中，并在需要时从数组中检索图像，并将其放入
中。您可以在onload
事件中更改其目标。getRandomImage
函数从该数组返回一个随机图像。我还更新了获取随机整数的方法。
您正在设置的不是您想要的。您的数组（图像
）存储的是完整的
标记，而不仅仅是指向该图像的链接
将图像更改为存储值，如下所示：
document.write(theImages[whichImage]);

或者使用当前设置作为图像标记
(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);
};

此外：

对于随机数，您可能应该坚持使用Math.floor（）
你绕到你的最大长度

var j=0
缺少一个

图像
img标签未关闭（

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


PS-您不应该使用文档。编写，但如果使用，则应通过文档关闭流。关闭，以告知浏览器完成页面加载。
您缺少src=”“的结束引号和img标记（“/>”）的结尾在你的“document.write”call中，人们现在不介意结束行吗？；
@Wezly为什么要结束行？你的javascript中有很多行是Chuck的。@Ian我不知道，这有点像我问的原因-我仍然这样做是出于良好的实践，我写的其他语言更挑剔，需要它们。我想这是一个好习惯。@jascha当它们分开时返回true多行，分号或分号。我不认为分号会促使上述noobs也不拆分returs。我将其更改为document.write（图像[whichImage]）；但它仍然不起作用，谢谢你的帮助。@ChuckNorris它应该可以很好地工作。不管怎样，我在我的答案中添加了代码，说明了我将如何处理它，它似乎更有条理，也更有效。
document.write(theImages[whichImage]);

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();