javascript - 无法使功能自动刷新

我无法使某个功能在设定的时间段内自动刷新。

我有一个测试页面，我想在此页面上模拟自动刷新一段时间。假设我有4张图片，并且希望自动刷新“位置”时随机显示这些图片。

这是我目前所拥有的：

<html>
<head>
 <script type="text/javascript">
        var imageURLs = [
            "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg",
            "http://orissadiary.com/wp-content/uploads/2017/03/advertise-here-300x250.png",
            "https://pics.me.me/medium-rectangle-300px-x-250px-18306117.png",
            "https://travelfree.info/wp-content/uploads/2015/08/1454913661banner300.gif"
        ];

        function getImageTag() {
            var img = '<img src=\"';
            var randomIndex = Math.floor(Math.random() * imageURLs.length);
            img += imageURLs[randomIndex];
            img += '\" alt=\"Some alt text\"/>';
            return img;
        }
    </script>
</head>

<body>
      <div class="autorefresh">
          <script type="text/javascript">
              document.write(getImageTag());
              setInterval('getImageTag()', 3000);
          </script>
       </div>

</body>
</html>

我现在得到的是，只有当我手动刷新页面时，此代码才是随机图像。假设我不太了解HTML CSS JS，也弄不清什么地方出了问题。有人可以帮我吗？

最佳答案

这是添加新添加内容的解决方案：

<html>
<head>
 <script type="text/javascript">

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

        var imageURLs = [
            "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg",
            "http://orissadiary.com/wp-content/uploads/2017/03/advertise-here-300x250.png",
            "https://pics.me.me/medium-rectangle-300px-x-250px-18306117.png",
            "https://travelfree.info/wp-content/uploads/2015/08/1454913661banner300.gif"
        ];

        function getImageTag() {
            var img = '<img src=\"';
            var randomIndex = getRandomInt(0, imageURLs.length-1);
            img += imageURLs[randomIndex];
            img += '\" alt=\"Some alt text\"/>';
            return img;
        }
    </script>
</head>

<body>
      <div class="autorefresh">
          <script type="text/javascript">


              function update(){

                 document.write(getImageTag());

              }

              setInterval(update, 3000);


          </script>
       </div>

</body>
</html>

这是更新存在Img的解决方案：

function update(){

  var myContainer = document.getElementById("autorefresh");
  myContainer.innerHTML = "";
  myContainer.appendChild(getImageTag());

}

setInterval(update, 3000);

    <html>
    <head>
     <script type="text/javascript">

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

            var imageURLs = [
                "https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg",
                "http://orissadiary.com/wp-content/uploads/2017/03/advertise-here-300x250.png",
                "https://pics.me.me/medium-rectangle-300px-x-250px-18306117.png",
                "https://travelfree.info/wp-content/uploads/2015/08/1454913661banner300.gif"
            ];

         function getImageTag() {

            var img = new Image();
            var randomIndex = getRandomInt(0, imageURLs.length-1);
             img.src = imageURLs[randomIndex];
             img.alt="Some alt text";
            return img;
         }
        </script>
    </head>

    <body>
          <div id="autorefresh">
           </div>

    </body>
    </html>

这比文字和写入功能要好得多：

var img = new Image（）;

您需要避免eval并编写此函数可能会有危险。

https://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/