随机翻转卡片 HTML JavaScript

Question

我应该让一组卡片按随机顺序出现，但由于控制台上出现大量错误，我似乎无法做到这一点。我对写 JavaScript 没有信心，因为我还在学习过程中。照片卡有38张，我刷新页面的时候，照片应该会改变顺序。

  let card = document.createElement("div");
  let front = document.createElement("div");
  let back = document.createElement("div");
  front.classList.add("card-front");
  back.classList.add("card-back");
  card.appendChild(front);
  card.appendChild(back);
  card.classList.add("card");
  let img = document.createElement('img');
  parent.appendChild(img);

  let cards = [];
  for (let i = 0; i < 19; i++) {
    let num = document.createElement('card-front');
    num.appendChild(i);
    cards.push(num);
    //num.textContent = r;
    //pearent.appendChild(num);
  }

  while(cards.length != 0) {
    let r = Math.floor(Math.random()*cards.length);
    let n = cards.splice(r, 1);
    parent.appendChild(n[0]);
    let cont = document.getElementById("CONTAINER");
    parent.appendChild(n[0]);
  }

The HTML looks like this

Answer 1

正如@54ka 所说，您对 id 属性的使用是错误的。 id 必须是唯一的。所以它在你的整个文档中只能出现一次。这就是您的 document.getElementById() 无法正常工作的原因。

以下示例使用由 javascript 随机化的 flexbox layout together with the flexbox order property。这意味着没有删除和添加元素。它只是直接将顺序设置为随机。这样就干净多了。这也更好地（在我看来）区分了 css 完成的样式和 javascript.

完成的“功能”

let cards = document.getElementsByClassName("card");
if(cards !== null){
  for(let i = 0; i < cards.length; i++){
    cards.item(i).style.order = parseInt(Math.random() * 1000);
  }
 }

.card-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 430px;
  padding: 10px;
  border: 1px solid #aaa;
}

.card{
  padding: 15px;
  margin: 15px;
  box-shadow: 1px 1px 5px #aaa;
}

<div class="card-container">
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ff0000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/00ff000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/0000ff" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ffff00" />
    </div>
  </div>
</div>

如果您想坚持添加和删除（我不建议这样做！）您可以使用以下代码：

let cards = document.getElementsByClassName("card");
if(cards !== null){
  // create a list that contains all indices of the cards
  let card_indices = [];
  for(let i = 0; i < cards.length; i++){
    card_indices.push(i);
  }
  
  // randomize the card indices and insert the card
  for(let i = 0; i < cards.length; i++){
    // get a random card index
    let j = Math.floor(Math.random() * card_indices.length);
    // re-add this element to the same parent to the front, adding
    // all elements will shuffle them
    let card = cards.item(card_indices[j]);
    card.parentNode.appendChild(card);
    // mark this index as taken
    card_indices.splice(j, 1);
  }
 }

<div class="card-container">
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ff0000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/00ff000" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/0000ff" />
    </div>
  </div>
  <div class="card">
    <div class="card-front">  
      <img src="https://via.placeholder.com/150/ffff00" />
    </div>
  </div>
</div>

随机翻转卡片 HTML JavaScript

Random Flip Card HTML JavaScript

html

random

image

flip