如何使圖像在 Javascript 中隨機出現？

Question

我需要創建一個帶有“開始游戲”按鈕的網頁。 單擊此按鈕時，我下載的 5 個圖像 (img1.png...img5.png) 必須隨機出現，一次一個，每半秒一次。 到目前為止，這是我的代碼，任何幫助將不勝感激！

<html>
<head>
  <script>

  var rollImagesSchedule;
  var rollImagesCounter;

  function rollImagesAnimation(){
    rollImagesCounter = 0;
    rollImagesSchedule = setInterval(500);
  }

  function rollImages(){
    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";

    var theImage = document.getElementById("display");
    theImage.src = imageFile;

    rollImagesCounter = rollImagesCounter + 1;

    if (rollImagesCounter == 10){
      clearInterval(rollImagesSchedule);
    }
  }
  </script>
</head>
<body>
  <h1>Game</h1>
  <button onClick="rollImagesAnimation()">Start frog game</button>

  <br /><br />

  <img id="display" style='width:200px; height:200px;'>
</body>
</html>

Answer 1

我認為您對使用setInterval的方式感到困惑。

您可以嘗試在setInterval函數之外創建一個計數器，並將您的所有作品嵌套在其中。 櫃台應該在頂部檢查。

function rollImages(){
  var counter = 0;
  var interval = setInterval(function () {
    if (counter === 10) {
      clearInterval(interval);
      return;
    }
    
    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";

    var theImage = document.getElementById("display");
    theImage.src = imageFile;

    counter++;
  }, 500);
}

然后，您可以編輯捕獲事件rollImages ：

<button onClick="rollImages()">Start frog game</button>

Answer 2

我的英語不是很好，所以我可能會誤解你的問題。 我就按照我的理解來回答吧。

您的要求是每 500 毫秒隨機顯示五張圖片中的一張，對嗎？ 如果是這樣，你可以試試這個想法：

將5張圖片的src放入一個數組

var imageSrcs = ["image1","image2","image3","image4","image5"];

每 500 毫秒，執行以下函數：

function rollImages(){
          // Randomly generate a random number between 0-4
          int index = Math.floor(Math.random() * 5) + 1;
         
          var theImage = document.getElementById("display");
          // Use random numbers as subscripts and take values from the array
          theImage.src = imageSrcs[index];
}

Answer 3

您可以將圖像名稱文件存儲到一個數組中，然后 setInterval 一個隨機數並分配一個 img html 元素的來源：

 var list = [ "image1.jpg", "image2.jpg", "image3.jpg", ]; var i = 0; function changeImgs() { var imageValue = Math.floor(Math.random() * list.length - 1) + 1; image.src = list[imageValue]; } setInterval(function() { changeImgs() }, 2000); window.onload = changeImgs;

 <img id="image" class="size">

如何使圖像在 Javascript 中隨機出現？

問題描述

3 個解決方案

解決方案1
2 已采納 2020-10-17 04:09:47

解決方案2
0 2020-10-17 04:09:11

解決方案3
0 2020-10-17 04:13:23

如何使圖像在 Javascript 中隨機出現？

問題描述

3 個解決方案

解決方案1 2 已采納 2020-10-17 04:09:47

解決方案2 0 2020-10-17 04:09:11

解決方案3 0 2020-10-17 04:13:23

解決方案1
2 已采納 2020-10-17 04:09:47

解決方案2
0 2020-10-17 04:09:11

解決方案3
0 2020-10-17 04:13:23