如何在 HTML 中的每个项目之间打印具有延迟的列表

3回答

守着星空守着你

您可以将参数传递给 timeout 函数，因此我们可以使用它来显示第一个值，然后增加它并再次启动超时，如果该值为<= 3：window.setTimeout(press, 1000, 1);//Should use For loop variable to fetch and print specific element's Idfunction press(j) {  document.getElementById(j).innerHTML = j;  if (++j <= 3) window.setTimeout(press, 1000, j);}//Id for each item

繁花不似锦

JavaScript 的替代方法是为此使用 CSS。作为奖励，即使 JavaScript 被禁用，您的页面仍然可以工作。首先，让我们从一些干净、有效的标记开始：<html>  <body>    <div class="popIn">      Paragraph 1      Paragraph 2      Paragraph 3    </div>        </body></html>现在，您的 CSS（例如在中的<style>标记中<head>）添加一个关键帧动画，visible在最后一秒将可见性设置为正确：@keyframes popIn {  99% {    visibility: hidden;  }  100% {    visibility: visible;  }}现在，添加一个规则来选择.popIn. 在这个选择器中，>意味着直接后代，并且*意味着任何东西。该规则将设置我们的动画。.popIn > * {  animation: 1s popIn;  animation-fill-mode: forwards;  visibility: hidden;}如果您现在运行此代码，您会看到 1 秒后，所有内容都同时出现。我们所要做的就是按顺序选择各个段落并更改动画持续时间。.popIn *:nth-child(2) {  animation-duration: 2s;}.popIn *:nth-child(3) {  animation-duration: 3s;}现在，段落将依次显示，无需编写脚本！

胡子哥哥

在您的情况下，setTimeout它只触发一次，因为它没有等待循环并i在范围内声明，因此在循环之后它等于3.您可以使用setInterval以下方法传递参数并执行clearIntervalwheni超过数量参数：let i = 1;const a = window.setInterval(press, 1000, i);//Should use For loop variable to fetch and print specific element's Idfunction press() {  document.getElementById(i).innerHTML = i++;  if (i > 3)    window.clearInterval(a);}//Id for each item