我有 5 個空白框，我希望每 1 秒按順序填滿每個框。我該怎么做呢？我的 JS 是錯誤的，無法正常作業。

let blankSquare = document.querySelectorAll(".square");

function fillUp() {
  setInterval(() => {
    blankSquare.classList.add(".fill")
  }, 1000)
}


blankSquare.addEventListener("fillUp");

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

uj5u.com熱心網友回復：

使用 CSS 的交錯影片

這里有一個例子，你不一定需要的JavaScript，而只是style一個包含CSS屬性VAR（變數），如style="--anim=N"這里N是一個索引0到N，并使用CSScalc()的animation-delay屬性：

.square {
  height: 3vh;
  aspect-ratio: 1;
  border: solid 2px grey;
  animation: fill 0.3s calc(var(--anim) * 1s) forwards;
}

@keyframes fill {
  to { background: grey; }
}

<div class="squares">
  <div class="square" style="--anim:0"></div>
  <div class="square" style="--anim:1"></div>
  <div class="square" style="--anim:2"></div>
  <div class="square" style="--anim:3"></div>
  <div class="square" style="--anim:4"></div>
</div>

如果您不想手動硬編碼style屬性，只需添加此 JS：

const ELS = (sel, el) => (el || document).querySelectorAll(sel);
ELS(".square").forEach((el, i) => el.style.setProperty("--anim", i));

使用 JavaScript 的交錯影片

給定一個 JavaScript 函式，您可以使用它來決定何時開始交錯影片：

在接受引數 1：元素集合，2：開始索引的遞回函式中使用setTimeout代替。每個下一個遞回函式呼叫都會傳遞一個遞增的索引setInterval fillUp

const fillUp = (els, i = 0) => {
  els[i].classList.add("fill");
  i  = 1;
  if (i < els.length) setTimeout(() => fillUp(els, i), 1000);
};

fillUp(document.querySelectorAll(".square"));

.square {
  height: 3vh;
  aspect-ratio: 1;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

相關文章/資源：

CSS 自定義屬性變數
CSS var()
CSS 計算（）
交錯影片的方法 CSS-Tricks

uj5u.com熱心網友回復：

您可以將專案的索引存盤在一個變數中，并在區間內遞增它。

let blankSquare = document.querySelectorAll(".square");

let index = 0;

function fillUp() {
  setInterval(() => {
    blankSquare[index  ].classList.add("fill")
  }, 1000)
}


fillUp()

.square {
  margin: 1vh;
  height: 3vh;
  width: 3vh;
  background-color: none;
  border: solid 2px grey;
}

.fill {
  background-color: grey;
}

<div class="squares">

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/392222.html

標籤：javascript html

上一篇：AdobeReader上的PDF“預期字典物件”但在Chrome上完美

下一篇：驗證器說它沒有錯誤并且代碼不會運行

具有延遲的交錯連續影片

使用 CSS 的交錯影片

使用 JavaScript 的交錯影片