Fatal编程技术网

Javascript 选择随机图像

javascript html

Javascript 选择随机图像,javascript,html,Javascript,Html,我一直在尝试获取一个随机图像，以便在加载时显示。这是我正在使用的代码： <head> <script type="text/javascript"> ImageArray = new Array(); image[0] = 'goat1.jpg'; image[1] = 'kitchen4.jpg'; image[2] = 'pig1.jpg'; image[3] = 'site1.jpg'; image[4] =

我一直在尝试获取一个随机图像，以便在加载时显示。这是我正在使用的代码：

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>


ImageArray=新数组（）；
图像[0]=“goat1.jpg”；
图片[1]=“kitchen4.jpg”；
图像[2]=“pig1.jpg”；
图像[3]=“site1.jpg”；
图片[4]=“site2.jpg”；
图片[5]=“site3.jpg”；
图片[6]=“site4.jpg”；
图片[7]=“site5.jpg”；
图片[8]=“site6.jpg”；
图片[9]=“site7.jpg”；
图像[10]=“site8.jpg”；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=ImageArray[num]；
document.getElementById（“randImage”）.textContent=（“”）
}
我是javascript新手，我是从网上找到的代码片段拼凑而成的

此代码的问题在于它显示的是
，而不是图像。

ImageArray
没有项目，因此获取它的任何索引都将返回未定义。我认为您正在尝试设置
ImageArray
的值，但意外地将
image
放入。其次，你不需要
textContent
，你需要
innerHTML
。这可能就是您想要的代码：

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'goat1.jpg';
    ImageArray[1] = 'kitchen4.jpg';
    ImageArray[2] = 'pig1.jpg';
    ImageArray[3] = 'site1.jpg';
    ImageArray[4] = 'site2.jpg';
    ImageArray[5] = 'site3.jpg';
    ImageArray[6] = 'site4.jpg';
    ImageArray[7] = 'site5.jpg';
    ImageArray[8] = 'site6.jpg';
    ImageArray[9] = 'site7.jpg';
    ImageArray[10] = 'site8.jpg';


function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>


ImageArray=新数组（）；
ImageArray[0]=“goat1.jpg”；
ImageArray[1]=“kitchen4.jpg”；
ImageArray[2]=“pig1.jpg”；
ImageArray[3]=“site1.jpg”；
ImageArray[4]=“site2.jpg”；
ImageArray[5]=“site3.jpg”；
ImageArray[6]=“site4.jpg”；
ImageArray[7]=“site5.jpg”；
ImageArray[8]=“site6.jpg”；
ImageArray[9]=“site7.jpg”；
ImageArray[10]=“site8.jpg”；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=ImageArray[num]；
document.getElementById（“randImage”）.innerHTML=（“”）
}
问题在于您没有分配数组
ImageArray
的值，而是分配数组
image
。您可以通过将图像数组重命名为
image
，或者通过其他方式来更改此设置。因此：

<script type="text/javascript">
    var image = new Array();
    image[0] = 'goat1.jpg';
    image[1] = 'kitchen4.jpg';
    image[2] = 'pig1.jpg';
    image[3] = 'site1.jpg';
    image[4] = 'site2.jpg';
    image[5] = 'site3.jpg';
    image[6] = 'site4.jpg';
    image[7] = 'site5.jpg';
    image[8] = 'site6.jpg';
    image[9] = 'site7.jpg';
    image[10] = 'site8.jpg';


    function getRandomImage() {
        var num = Math.floor( Math.random() * 11);
        var img = image[num];
        document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

    }
</script>


var image=新数组（）；
图像[0]=“goat1.jpg”；
图片[1]=“kitchen4.jpg”；
图像[2]=“pig1.jpg”；
图像[3]=“site1.jpg”；
图片[4]=“site2.jpg”；
图片[5]=“site3.jpg”；
图片[6]=“site4.jpg”；
图片[7]=“site5.jpg”；
图片[8]=“site6.jpg”；
图片[9]=“site7.jpg”；
图像[10]=“site8.jpg”；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=图像[num]；
document.getElementById（“randImage”）.textContent=（“”）
}
或：


var ImageArray=新数组（）；
ImageArray[0]=“goat1.jpg”；
ImageArray[1]=“kitchen4.jpg”；
ImageArray[2]=“pig1.jpg”；
ImageArray[3]=“site1.jpg”；
ImageArray[4]=“site2.jpg”；
ImageArray[5]=“site3.jpg”；
ImageArray[6]=“site4.jpg”；
ImageArray[7]=“site5.jpg”；
ImageArray[8]=“site6.jpg”；
ImageArray[9]=“site7.jpg”；
ImageArray[10]=“site8.jpg”；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=ImageArray[num]；
document.getElementById（“randImage”）.textContent=（“”）
}
存储图像名称的变量的名称需要在整个脚本中保持一致。

您应该定义
image
数组，但是
ImageArray
，您也可以这样减少代码

<head>
    <script type="text/javascript">
    var image = ['goat1.jpg', 'kitchen4.jpg', 'pig1.jpg', 
    'site1.jpg', 'site2.jpg', 'site3.jpg', 'site4.jpg', 'site5.jpg', 
    'site6.jpg', 'site7.jpg', 'site8.jpg']; 

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);

    var img = image[num];
    document.getElementById("randImage").textContent = ('<img src="' + 'images/random/' + img + '" width="250px">')

}
</script>
</head>
<body onload="getRandomImage()">
<div id="randImage"></div>
</body>


var image=['goat1.jpg'、'kitchen4.jpg'、'pig1.jpg'，
“site1.jpg”、“site2.jpg”、“site3.jpg”、“site4.jpg”、“site5.jpg”，
'site6.jpg'、'site7.jpg'、'site8.jpg']；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=图像[num]；
document.getElementById（“randImage”）.textContent=（“”）
}
您没有传递数组并将
textContent
更改为
innerHTML


ImageArray=新数组（）；
ImageArray[0]=“goat1.jpg”；
ImageArray[1]=“kitchen4.jpg”；
ImageArray[2]=“pig1.jpg”；
ImageArray[3]=“site1.jpg”；
ImageArray[4]=“site2.jpg”；
ImageArray[5]=“site3.jpg”；
ImageArray[6]=“site4.jpg”；
ImageArray[7]=“site5.jpg”；
ImageArray[8]=“site6.jpg”；
ImageArray[9]=“site7.jpg”；
ImageArray[10]=“site8.jpg”；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=ImageArray[num]；
document.getElementById（“randImage”）.innerHTML=（“”）
}
分配数组元素时，必须使用
ImageArray
：

ImageArray[0] = 'goat1.jpg';

var ImageArray = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg','site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg','site8.jpg'];

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}
而不是：

image[0] = 'goat1.jpg';
我还建议在声明时分配数组，而不是使用单个语句将值分配给数组的不同元素：

ImageArray[0] = 'goat1.jpg';

var ImageArray = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg','site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg','site8.jpg'];

function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" width="250px">')
}

var ImageArray=['goat1.jpg'、'kitchen4.jpg'、'pig1.jpg'、'site1.jpg'、'site2.jpg'、'site3.jpg'、'site4.jpg'、'site5.jpg'、'site6.jpg'、'site7.jpg'、'site8.jpg']；
函数getRandomImage（）{
var num=Math.floor（Math.random（）*11）；
var img=ImageArray[num]；
document.getElementById（“randImage”）.innerHTML=（“”）
}
变更建议：

var imgs = ['goat1.jpg','kitchen4.jpg','pig1.jpg','site1.jpg','site2.jpg',
            'site3.jpg','site4.jpg','site5.jpg','site6.jpg','site7.jpg',
            'site8.jpg'];
function getRandomImage(){
 var rnd = Math.floor(Math.random()*imgs.length);
 document.getElementById('randImage').src = imgs[rnd];
}
...
<div><img id="randImage" /></div>

var imgs=['goat1.jpg'、'kitchen4.jpg'、'pig1.jpg'、'site1.jpg'、'site2.jpg'，
‘site3.jpg’、‘site4.jpg’、‘site5.jpg’、‘site6.jpg’、‘site7.jpg’，
"site8.jpg",；
函数getRandomImage（）{
var rnd=Math.floor（Math.random（）*imgs.length）；
document.getElementById（'randImage'）.src=imgs[rnd]；
}
...

第二，他将不得不使用innerHTML而不是textContent。@wumm
textContent
很好用，不是吗？这就像使用jQuery的
.text（）
而不是
.html（）
——它也能工作，但是
textContent
对html和XML文件都能工作，而
innerHTML
只对html工作。@TheWobbuffet完全正确，但OP试图达到“随机图像加载时显示”的效果。我认为他不想显示html代码。@wumm-Oh，我认为这与实体有关。那么，答案更新了看看：