当我单击停止按钮时打印一个特定的数组元素答案

【问题标题】：Preint one specific array element, when I click stop button当我单击停止按钮时打印一个特定的数组元素
【发布时间】：2021-01-27 14:54:15
【问题描述】：

我反复循环遍历一个数组，我的目标是停止循环并打印出数组中的特定元素并通过 span id="fruit" 显示它。请看下面的代码：

var title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898'];

var i = 0; // the index of the current item to show
var animate = setInterval(function() {
  // setInterval makes it run repeatedly
  document
    .getElementById('fruit')
    .innerHTML = title[i++];
  // get the item and increment
  if (i == title.length) i = 0;
  // reset to first element if you've reached the end
}, 15);

function stop() {
  clearInterval(animate);
}

<h1>THE WINNER IS : </h1>
<h1><span id="fruit"></span></h1>

<center><button onclick="stop()">STOP</button></center>

【问题讨论】：

您的问题不清楚，您期待什么行为？
你能描述更多吗？你的预期输出是什么？
如果您希望在单击 STOP 之前不显示数字，则不要更改 animate 函数内的 innerHTML，而只需更新 stop 内的 innerHTML功能
我的代码打印出数组中的所有元素，它会滚动数组，就像抽奖系统一样，当我单击停止按钮时，我希望代码在打印输出数组中的一个特定项目时停止作为赢家。
我希望数字出现，只是我只想滚动在数组中的特定数字上停止，只要我点击停止

标签： javascript arrays setinterval clearinterval

【解决方案1】：

你是说

const title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898'];

const winner = title[3]; // for example

var i = 0; // the index of the current item to show
var animate = setInterval(function() {
  // setInterval makes it run repeatedly
  document
    .getElementById('fruit')
    .innerHTML = title[i++];
  // get the item and increment
  if (i == title.length) i = 0;
  // reset to first element if you've reached the end
}, 15);

function stop() {
  clearInterval(animate);
  document
    .getElementById('fruit')
    .innerHTML = winner;
}

<h1>THE WINNER IS : </h1>
<h1><span id="fruit"></span></h1>

<center><button onclick="stop()">STOP</button></center>

【讨论】：

【解决方案2】：

var title = ['233249864597', '233209425159', '233201112221', '233546056136', '233266549303', '233209409846', '233501345825', '233248446422', '233546112136', '233541006033', '233502089334', '233552476293', '233268222280', '233202240898'];

var i = 0; // the index of the current item to show
var animate = setInterval(function() {
  // setInterval makes it run repeatedly
  //document.getElementById('fruit').innerHTML = title[i++];
  // get the item and increment
  if (i == title.length) i = 0;
  // reset to first element if you've reached the end
}, 15);

function stop() {
  clearInterval(animate);
  document.getElementById('fruit').innerHTML = title[i++];
}

<h1>THE WINNER IS : </h1>
<h1><span id="fruit"></span></h1>

<center><button onclick="stop()">STOP</button></center>

【讨论】：

这不是一个具体的数字，当 i === title.length-1 时会报错
? " ...在数组中的特定数字上停止，只要我点击停止"

【解决方案3】：

这个怎么样？

我把数字改成水果是因为……嗯……我只是想写一些水果。但它们可以改回数字 ofc。

var fruits = ['Apple', 'Banana', 'Pineapple', 'Orange', 'Kiwi', 'Watermelon'];

var i = 0; // the index of the current item to show
var animate = setInterval(function() {
  i++
  document
    .getElementById('fruit')
    // use modulus operator to stay inside array
    .innerHTML = fruits[i % fruits.length];
}, 15);

function stop() {
  clearInterval(animate);
}

<h1>THE WINNER IS : </h1>
<h1><span id="fruit"></span></h1>

<center><button onclick="stop()">STOP</button></center>

【讨论】：