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

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

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

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

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

如果有人可以向我展示一个精简版以帮助我入门，我将不胜感激。

解决方法

此答案假设您具有 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>