我怎樣才能移動數組中的所有元素，然后刪除1個元素並保持移動

Question

我想模擬一副紙牌蜜蜂傳播。 我在一個數組中有10個卡片元素，我可以用

for (i = 0; i < l; i++) {
     cardArray[i].style.left = 20 + pos + "px";
}

我增加pos++ ，當我到達pos == 30我想splice()其中一個元素（一張卡），因此它將停止並繼續移動剩余9個元素的數組的其余部分，而我可以不能弄清楚該怎么做。 我只能將所有元素移動30px它們從數組中刪除1個元素，然后一切都停止在該位置。 我使用setInterval使其看起來像動畫。

 var cardOne = document.querySelector("#card1"); var cardTwo = document.querySelector("#card2"); var cardThree = document.querySelector("#card3"); var Btn = document.querySelector("#startBtn"); var topCard = document.querySelector("#topCard"); Btn.addEventListener("click", cards); var cardArray = [cardOne, cardTwo, cardThree]; console.log(cardArray); function myMove() { topCard.style.display = "none"; var id = setInterval(frame, 5); var pos = 0; var k = 0; var l = cardArray.length; console.log(cardArray); function frame() { k++ for (i = 0; i < l; i++) { cardArray[i].style.left = 20 + pos + k + "px"; console.log(cardArray); } if (k == 30) { clearInterval(id); pos += k; cardArray.splice(0, 1); // console.log(pos); // console.log(k); // console.log(cardArray); } } } function cards() { document.getElementById("intro").innerHTML = "Choose a random card"; document.getElementById("start-container").style.margin = "50px 0 0 0"; document.getElementById("intro").style.height = "50px"; document.getElementById("intro").style.margin = "0 0 0 220px"; document.getElementById("wrapper").style.display = "flex"; } 

Answer 1

據我了解，您的問題似乎是您在對“ frame（）”的前30個調用之后清除了間隔計時器。

clearInterval(id);

也許，您可以像下面這樣進行操作：

if (k == 30) {
  pos += k;
  cardArray.splice(0, 1);
  if (cardArray.length===0) clearInterval(id);
  k=0; // i think, you need to reset the counter here, right?
}

您還可以將l變量初始化為cardArray的長度，然后稍后縮短數組，但不更新循環的上限。 所以，線

var l = cardArray.length;

應該在for循環之前從外部函數進入frame()方法。