Question

我想制作一个每个目的地反复弹出的游戏。然后，当用户按下停止按钮时，选择随机地点。我可以进行随机选择但我不知道如何在用户按下停止按钮之前连续播放阵列中的每个选项。以下是我到目前为止所做的事情。

var random_place_array = ['Paris', 'Tokyo', 'Bangkok', 'New York'];
var place_length = random_place_array.length;

function start() {
  //once click, clear innerHTML and play the items in array

  for (var i=0; i<=place_length-1; i++) {
    showPlace = "";
    if (i<place_length) {
      showPlace = showPlace + random_place_array[i];
      document.getElementById("place").innerHTML = showPlace;   
    } else {
      i=0;
      start();
    }
   }
  }

现在我的document.getElementById("place").innerHTML只显示数组中的最后一个元素。

Answer 1

这可以通过setInterval来解决：

const places = ['Paris', 'Tokyo', 'Bangkok', 'New York'];
let index = 0;

const interval = setInterval(() => {
    document.getElementById('place').innerHTML = places[index];        
    index = (index + 1) % places.length;
}, 100);

const stop = () => clearInterval(interval)

你的按钮：

<button onclick="stop();">Select a place</button>

Answer 2

您可以使用setInterval并清除点击间隔。可以使用余数运算符和数组的长度来指定索引。

＆＃13;

function change() {
    document.getElementById("out").innerHTML = random_place_array[index++];
    index %= random_place_array.length;
}
  
function stop() {
    clearInterval(intervalID);
}

var random_place_array = ['Paris', 'Tokyo', 'Bangkok', 'New York'],
    intervalID = setInterval(change, 200),
    index = 0;

＆＃13;

<div id="out"></div><br>
<button onclick="stop();">Stop</button>

＆＃13;

Answer 3

您使用的是条件：

i<=place_length-1;

在for循环中并检查条件：

if (i<place_length)

第二个陈述永远是真的。

尝试删除for循环中的条件。

for (var i=0; ; i++)

如何重复显示数组中的每个元素，并在按钮单击时停止它

3 个答案: