Question

好吧即时尝试随机化此代码上的图像而不编辑html代码（只能编辑javascript）但它不起作用且输出为空！另外如果我在div splash之后放置randomImg（）它可以工作，但在输出而不是图片上显示alt =随机图像。如何在不编辑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>

Answer 1

一些问题：images[]不存在于randomImg()之外。您从images[]缺少索引2和3，并且在将其更改为1时，您永远不会显示索引0.数组从零开始，因此请删除该行。它没有显示，因为它随机选择2和3，因此没有要显示的图像。

您的代码显示为： Fiddle demo

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

使用alt update

更新了代码

如果您还要更新alt属性，则需要将其存储在images数组中，并像src一样更新。

<强> Fiddle demo with alt updating

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

使用javascript＃2随机化图像

1 个答案:

使用alt update