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

JavaScript的替代方法是为此使用CSS。另外，即使禁用了JavaScript，您的页面仍然可以正常工作。

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

<html>
  <body>
    <div class="popIn">
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
    </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;
}

现在，段落将一个接一个地显示，并且无需编写脚本！

Answer 3

在您的情况下，setTimeout仅触发一次，因为它没有等待循环，并且在范围内声明了i，因此在循环之后它等于3。

您可以按以下方式使用setInterval来传递参数，并在i超出数字参数时执行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

或者，您也可以像这样进行循环：

<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>

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

4 个答案: