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

Question

<html>
    <body>
        //Id for each item
        <p id=1></p>
        <p id=2></p>
        <p id=3></p>
        <script>
            for(i = 0; i < 3; i++) {
                window.setTimeout(press, 1000);
                //Should use For loop variable to fetch and print specific element's Id
                function press() {
                    document.getElementById(i).innerHTML = i;   
                }
            }
        </script>
    </body>
</html>

我对这一切有点菜鸟。这些命令中的大部分都是我从 w3schools 获得的，我只是试图一点一点地将所有内容拼凑在一起。

Answer 1

您可以将参数传递给超时函数，因此我们可以使用它来显示第一个值，然后递增它并在值为 <= 3:

时再次开始超时

window.setTimeout(press, 1000, 1);
//Should use For loop variable to fetch and print specific element's Id
function press(j) {
  document.getElementById(j).innerHTML = j;
  if (++j <= 3) window.setTimeout(press, 1000, j);
}

//Id for each item
<p id=1></p>
<p id=2></p>
<p id=3></p>

Answer 2

或者您可以像这样制作循环：

<html>
<body>
    //Id for each item
    <p id=1></p>
    <p id=2></p>
    <p id=3></p>
    <script>
        function press(i) {
            if (i < 3) {
                setTimeout(function () {
                    i++;
                    document.getElementById(i).innerHTML = i;
                    press(i);
                }, 1000);
            }
        }
        press(0);
    </script>
</body>
</html>

Answer 3

在你的例子中，setTimeout 只触发一次，因为它没有等待循环并且 i 在范围内被声明，因此在循环之后它等于 3.

当 i 超过 paras:

时，您可以使用 setInterval as follows to pass the argument and do a clearInterval

let i = 1;

const a = window.setInterval(press, 1000, i);

//Should use For loop variable to fetch and print specific element's Id
function press() {
  document.getElementById(i).innerHTML = i++;
  if (i > 3)
    window.clearInterval(a);
}

//Id for each item
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>

Answer 4

JavaScript 的替代方法是为此使用 CSS。作为奖励，即使 JavaScript 被禁用，您的页面仍然可以工作。

首先，让我们从一些干净、有效的标记开始：

<html>
  <body>
    <div class="popIn">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </div>      
  </body>
</html>

现在，您的 CSS（例如 <head> 中的 <style> 标记）添加一个关键帧动画，最后将可见性设置为 visible第二个：

@keyframes popIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

现在，向 select .popIn 的所有直系后代添加规则。在这个 selector 中，> 表示直接后代，而 * 表示任何东西。该规则将设置我们的动画。

.popIn > * {
  animation: 1s popIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

如果您现在运行此代码，您会发现 1 秒后，所有内容都会同时出现。我们所要做的就是 select 按顺序排列各个段落并更改动画持续时间。

.popIn *:nth-child(2) {
  animation-duration: 2s;
}

.popIn *:nth-child(3) {
  animation-duration: 3s;
}

现在，段落会一个接一个地显示，不需要脚本！

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

How to print a list with a delay between each item in HTML

html

javascript

for-loop

list

delay