如何让一个数字每隔20秒递减5，然后实时显示这个数字？

Question

我如何让一个数字(var是f)每隔20秒减少5次，然后实时显示这个数字？我正在制作一个饥饿游戏模拟器来和我的朋友们一起玩，我希望每个饥饿的贡品都能为他们现场展示(都在不同的设备上)。我希望饥饿每20秒减少5次。这是我尝试过的：

    <h1>Hunger Games Tribute Status:</h1>
    <button onclick="startgame()">START GAME</button>
    <h5 id="hunger"></h5>
</body>

function startgame(){
var f = 200;
var intervalID = window.setInterval (foodcountdown(), 20000);
document.getElementById("hunger".innerHTML = f; }

function foodcountdown() {
var x=f-5;
var f=x;   }

Answer 1

如果你想共享你的f变量，你应该把它放在全局作用域中

var f = 200; //moved

function startgame(){
  var intervalID = window.setInterval (foodcountdown(), 20000);
  document.getElementById("hunger").innerHTML = f; //corrected 
}

function foodcountdown() {
  f=f-5; //corrected
  document.getElementById("hunger").innerHTML = f; //added 

}

Answer 2

1. setinterval(foodcountdown, 20000); -不应该有()，您需要将函数传递到间隔以让其执行，而不是自己执行

1. getElementById('hunger').innerHTML -您在innerHTML前面需要一个.，而不是;，因为您目前有

1. 通过在foodcountdown函数中的var f = ...中使用关键字var，可以创建一个局部变量，因此不会影响在startGame中声明的那个局部变量。f需要可由这两个函数访问，使其成为全局的，或者至少在相同的上限范围

中

1. 如果您想要清除您的intervalID

，也需要能够访问它

1. 你在游戏开始时会显示食物计数，但不会再出现了

下面是一个固定的demo：

​

var f, intervalID;

function startgame() {
  f = 200; // Allows you to restart a game from the start
  clearInterval(intervalID); // In case a game was already started
  intervalID = setInterval(foodcountdown, 200); // changed to 200ms for the demo
  displayFoodCount();
}

function foodcountdown() {
  f -= 5;
  displayFoodCount();
  if (f <= 0) {
    clearInterval(intervalID);
    console.log('Game over!');
  }
}

function displayFoodCount() {
  document.getElementById("hunger").innerHTML = f;
}

<h1>Hunger Games Tribute Status:</h1>
<button onclick="startgame()">START GAME</button>
<h5 id="hunger"></h5>

​

Answer 3

这是一个有效的例子。将您选择的变量和DOM移到顶部。如果你不打算插入超文本标记语言，你也可以用innerText代替innerHTML。

const hunger = document.getElementById("hunger");
const f = 200;

hunger.innerText = f;

function foodCountDown() {
 setInterval(function() {
   f -= 5
   hunger.innerText = f
 }, 20000)
}