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

Question

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

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

a div 以 60 秒计时器播放和暂停显示内容
60 秒后将弹出一个新的锻炼
重复 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>

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

How to make a timer show and hide divs?

html

javascript

css

timer