<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 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
您可以将参数传递给 timeout 函数，因此我们可以使用它来显示第一个值，然后增加它并再次启动超时，如果该值为<= 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>
繁花不似锦
TA贡献1851条经验 获得超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（例如在 中的<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;
}
现在，段落将依次显示，无需编写脚本！
胡子哥哥
TA贡献1825条经验 获得超6个赞
在您的情况下，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 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>
添加回答
举报
0/150
提交
取消