使用javascript随机化图像#2_Javascript_Html

使用javascript随机化图像#2

javascript html

使用javascript随机化图像#2,javascript,html,Javascript,Html,好的，我试图在不编辑html代码（只有javascript可以编辑）的情况下对此代码上的图像进行随机操作，但它不起作用，输出为空！另外，如果我在div splash之后放置randomImg（），它会工作，但会在输出图片上显示alt=random图像。如何在不编辑html和省略图像的alt属性的情况下使其工作 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

好的，我试图在不编辑html代码（只有javascript可以编辑）的情况下对此代码上的图像进行随机操作，但它不起作用，输出为空！另外，如果我在div splash之后放置randomImg（），它会工作，但会在输出图片上显示alt=random图像。如何在不编辑html和省略图像的alt属性的情况下使其工作

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML</title>
    <meta name="author" content="randomimg" />
    <!-- Date: 2014-03-06 -->
    <script type="text/javascript">
      function randomImg()
      {
        var images = new Array();
        images[0] = "img06.jpg";
        images[1] = "img07.jpg";
        images[2] = "img08.jpg";
        images[3] = "img09.jpg";
        images[4] = "img10.jpg";
        var random = Math.ceil(Math.random()* images.length);
        if (random == 0) {random =1;
      }
      document.getElementById('splash').firstElementChild.src =images[random];}
</script>
</head>
<body>  
    <div id="header">
    <div id="logo">
       <h1><a href="#">Welcome</a></h1>
       <h2>Flower of the day</h2>
    </div>
    <div id="splash"><img src="virus.jpg" alt="random images"/>
    </div>
    </div>
</body>
</html>


HTML
函数randomImg（）
{
var images=新数组（）；
图像[0]=“img06.jpg”；
图片[1]=“img07.jpg”；
图片[2]=“img08.jpg”；
图片[3]=“img09.jpg”；
图片[4]=“img10.jpg”；
var random=Math.ceil（Math.random（）*images.length）；
如果（random==0）{random=1；
}
document.getElementById（'splash'）.firstElementChild.src=images[random]；}
白昼之花

一些问题：

图像[]

在

随机img（）之外不存在。您缺少图像[]
中的索引2和3，并且在将其更改为1时，您永远不会显示索引0。数组是从零开始的，所以请删除该行。它不显示，因为它随机选择2和3，所以没有图像显示
您的代码显示为：
    function randomImg() {
    var images = new Array();
    images[0] = "http://placehold.it/350x150&text=image+0";
    images[1] = "http://placehold.it/350x150&text=image+1";
    images[2] = "http://placehold.it/350x150&text=image+2";
    images[3] = "http://placehold.it/350x150&text=image+3";
    images[4] = "http://placehold.it/350x150&text=image+4";

    /* 
    The length property of an array is one-based, whereas array
    indexes are zero-based so minus 1 is used to prevent it returning
    one over the upper index of the array.
    e.g. images.length returns 5 but the upper index is 4.
    */
    var random = Math.ceil(Math.random() * images.length-1);

    document.getElementById('splash').firstElementChild.src = images[random];
}

document.addEventListener('DOMContentLoaded', randomImg);

function randomImg() {
    var images = new Array();
    images[0] = {
        src: "http://placehold.it/350x150&text=image+0",
        alt: "image 0"
    },
    images[1] = {
        src: "http://placehold.it/350x150&text=image+1",
        alt: "image 1"
    },
    images[2] = {
        src: "http://placehold.it/350x150&text=image+2",
        alt: "image 2"
    },
    images[3] = {
        src: "http://placehold.it/350x150&text=image+3",
        alt: "image 3"
    },
    images[4] = {
        src: "http://placehold.it/350x150&text=image+4",
        alt: "image 4"
    };
    /* 
    The length property of an array is one-based, whereas array
    indexes are zero-based so minus 1 is used to prevent it returning
    one over the upper index of the array.
    e.g. images.length returns 5 but the upper index is 4.
    */
    var random = Math.ceil(Math.random() * images.length - 1);

    var imgElem = document.getElementById('splash').firstElementChild;

    imgElem.src = images[random].src;
    imgElem.alt = images[random].alt;
}

document.addEventListener('DOMContentLoaded', randomImg);


使用alt更新更新了代码
如果还想更新alt
属性，则需要将其存储在images
数组中，并像使用src
一样进行更新

    function randomImg() {
    var images = new Array();
    images[0] = "http://placehold.it/350x150&text=image+0";
    images[1] = "http://placehold.it/350x150&text=image+1";
    images[2] = "http://placehold.it/350x150&text=image+2";
    images[3] = "http://placehold.it/350x150&text=image+3";
    images[4] = "http://placehold.it/350x150&text=image+4";

    /* 
    The length property of an array is one-based, whereas array
    indexes are zero-based so minus 1 is used to prevent it returning
    one over the upper index of the array.
    e.g. images.length returns 5 but the upper index is 4.
    */
    var random = Math.ceil(Math.random() * images.length-1);

    document.getElementById('splash').firstElementChild.src = images[random];
}

document.addEventListener('DOMContentLoaded', randomImg);

function randomImg() {
    var images = new Array();
    images[0] = {
        src: "http://placehold.it/350x150&text=image+0",
        alt: "image 0"
    },
    images[1] = {
        src: "http://placehold.it/350x150&text=image+1",
        alt: "image 1"
    },
    images[2] = {
        src: "http://placehold.it/350x150&text=image+2",
        alt: "image 2"
    },
    images[3] = {
        src: "http://placehold.it/350x150&text=image+3",
        alt: "image 3"
    },
    images[4] = {
        src: "http://placehold.it/350x150&text=image+4",
        alt: "image 4"
    };
    /* 
    The length property of an array is one-based, whereas array
    indexes are zero-based so minus 1 is used to prevent it returning
    one over the upper index of the array.
    e.g. images.length returns 5 but the upper index is 4.
    */
    var random = Math.ceil(Math.random() * images.length - 1);

    var imgElem = document.getElementById('splash').firstElementChild;

    imgElem.src = images[random].src;
    imgElem.alt = images[random].alt;
}

document.addEventListener('DOMContentLoaded', randomImg);

一些问题：images[]
不存在于randomImg（）
之外。您缺少图像[]
中的索引2和3，并且在将其更改为1时，您永远不会显示索引0<代码>数组

是基于零的，因此请删除该行。它可能没有显示，因为它随机选择2和3，所以没有图像显示。你能帮我键入代码吗？是的，谢谢你指出遗漏的一点：）我不知道你为什么要做这样的编辑，但这不合适。是的！精彩的作品！！非常感谢，先生！！但它有时仍然显示随机图像（alt=随机图像）文本，而不是实际图像。。有什么办法可以省略吗？也许我可以更好地解释如果我能够发布图片会发生什么。。。但是它不允许我这么做，因为这是我来这里的第一天，我只有3个名声。我已经更新了答案，alt也被更新了，所以你可以比较这两组代码。欢迎顺便说一句。查看和部分，看看通常会问什么类型的问题，更重要的是在这里得到答案。嘿，它工作了。。。忘记添加实际图像路径…：我的坏。。。顺便说一句，如果你够善良，请解释（图片长度1）；如果（random<0）{random=0}位代码给我，请？我似乎没有通过我的新手大脑理解它。我已经在代码中添加了一条注释来解释-1。我删除了

if（random<0）

，因为它是多余的，因为

Math.random（）

将从0返回一个数字。它在那里，以防它返回一个负数。