首頁猿問如何在 HTML...

如何在 HTML 中的每個項目之間打印具有延遲的列表

JavaScript

開滿天機 2021-11-04 16:39:22

<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

反對回復 2021-11-04

繁花不似錦

TA貢獻1851條經驗獲得超4個贊

JavaScript 的替代方法是為此使用 CSS。作為獎勵，即使 JavaScript 被禁用，您的頁面仍然可以工作。

首先，讓我們從一些干凈、有效的標記開始：

<html>

<body>

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

}

現在，段落將依次顯示，無需編寫腳本！

反對回復 2021-11-04

胡子哥哥

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

反對回復 2021-11-04

3 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 HTML 中的每個項目之間打印具有延遲的列表

如何在 HTML 中的每個項目之間打印具有延遲的列表

3 回答

添加回答