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次调用后清除了间隔计时器

def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    list_comments = Comment.objects.get_queryset().filter(post_id=pk).order_by('-pk')
    paginator = Paginator(list_comments, 10)
    page = request.GET.get('commentpage')
    comments = paginator.get_page(page)
    return render(request, 'MyProject/post_detail.html', {'post': post, 'comments': comments})

也许，您可以按照以下方式进行操作：

clearInterval(id);

您还可以将l变量初始化为cardArray的长度，然后稍后缩短数组，但不更新循环的上限。所以，线

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?
}

应该在for循环之前从外部函数进入var l = cardArray.length;方法。

我怎样才能移动数组中的所有元素，然后删除1个元素并保持移动

1 个答案: