如何在HTML中的每个项目之间打印带有延迟的列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML中的每个项目之间打印带有延迟的列表相关的知识，希望对你有一定的参考价值。
<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获得了大多数这些命令，而我只是想将所有内容一点一点地拼凑在一起。
答案
您可以将参数传递给超时函数，因此我们可以使用它来显示第一个值，然后递增该值，如果值是<= 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>另一答案
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;
}
现在，段落将一个接一个地显示，并且无需编写脚本！
另一答案
在您的情况下，setTimeout仅触发一次，因为它没有等待循环，并且在范围内声明了i，因此在循环后等于3。
您可以按以下方式使用setInterval传递参数，并在setInterval超出数字参数时执行clearInterval：
clearIntervali另一答案
或者，您也可以像这样进行循环：
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);
}另一答案
使用for循环遍历列表，并在超时的情况下将其添加到HTML中
//Id for each item
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>以上是关于如何在HTML中的每个项目之间打印带有延迟的列表的主要内容，如果未能解决你的问题，请参考以下文章
（Python 3.7）如何使用 tkinter 打印消息字符之间有延迟？