如何让计时器显示和隐藏 div？

Question

所以我正在尝试制作这个“锻炼应用程序”，它可以循环显示如何以 60 秒的间隔进行锻炼，每个 div 可以暂停。

我不确定如何使用 vanilla Javascript、HTML 和 CSS 进行这项工作；但基本上我想做以下事情。

1. 一个显示内容的 div，带有 60 秒计时器，带有播放和暂停功能
2. 60 秒后会弹出新的锻炼方式
3. 重复 5 次

如果有人可以给我看一个精简版来帮助我入门，将不胜感激。

Answer 1

此答案假设您具备 HTML、CSS 和 Javascript 的基本知识。

要在给定时间后隐藏 div，您可以使用 setInterval 函数。

这是一个简单的例子：

let currentDiv = 1;
let timer = setInterval(changeDiv, 2000); //set to 60000 for 60 seconds
let maxNumOfDivs = 3;

function changeDiv() {
  if (currentDiv < maxNumOfDivs) {

    var currentElement = document.getElementById("div" + currentDiv);
    currentElement.classList.add("invisible");
    var nextElement = document.getElementById("div" + (currentDiv + 1));
    nextElement.classList.remove("invisible");
    currentDiv += 1;
  } else {
    clearInterval(timer);
  }
}

.invisible {
  display: none;
}

<div id="div1">i am the first div</div>
<div id="div2" class="invisible">i am the second div</div>
<div id="div3" class="invisible">i am the third div</div>