js翻牌计数

<div id="flipCard" class="card">
  <div class="card-front">正面</div>
  <div class="card-back">背面</div>
</div>
<p>点击次数: <span id="count">0</span></p>

.card {
  perspective: 1000px;
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}
.card-front {
  background-color: #333;
  color: white;
}
.card-back {
  background-color: #fff;
  color: #333;
  transform: rotateY(180deg);
}

let count = 0;
const card = document.getElementById('flipCard');
const countDisplay = document.getElementById('count');

card.addEventListener('click', () => {
  card.classList.toggle('flipped');
  count++;
  countDisplay.textContent = count;
});

card.addEventListener('transitionend', () => {
  if (card.classList.contains('flipped')) {
    card.querySelector('.card-front').style.transform = 'rotateY(180deg)';
    card.querySelector('.card-back').style.transform = 'rotateY(0deg)';
  } else {
    card.querySelector('.card-front').style.transform = 'rotateY(0deg)';
    card.querySelector('.card-back').style.transform = 'rotateY(180deg)';
  }
});