Question

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

我有一个测试页面，我想在此页面上模拟自动刷新一段时间。假设我有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，也弄不清什么地方出了问题。有人可以帮我吗？

Answer 1

此处提供添加新内容的解决方案：

<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（）;

Answer 2

在函数上的引号上加上引号，然后添加“窗口”。

<script type="text/javascript">
     getImageTag();
     window.setInterval(getImageTag, 3000);
</script>

此外，代码应更像这样：

<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">
                  window.onload = function() {
                      document.write(getImageTag());
                      window.setInterval(getImageTag(), 3000);
                  };
              </script>
          </div>
     </body>
</html>

无法使功能自动刷新

2 个答案: