JS怎么实现电影票选座

在现代的在线购票系统中，电影票选座功能是一个非常重要的组成部分。通过JavaScript（JS），我们可以实现一个交互式的选座界面，让用户能够方便地选择自己喜欢的座位。本文将介绍如何使用JS来实现一个简单的电影票选座功能。

1. HTML结构

首先，我们需要创建一个基本的HTML结构来展示电影院的座位布局。通常，电影院座位会以网格的形式展示，每个座位用一个div元素表示。

<div id="seat-map">
  <div class="row">
    <div class="seat" data-row="1" data-col="1"></div>
    <div class="seat" data-row="1" data-col="2"></div>
    <!-- 更多座位 -->
  </div>
  <div class="row">
    <div class="seat" data-row="2" data-col="1"></div>
    <div class="seat" data-row="2" data-col="2"></div>
    <!-- 更多座位 -->
  </div>
  <!-- 更多行 -->
</div>

2. CSS样式

为了让座位看起来更像实际的电影院座位，我们可以添加一些CSS样式。

#seat-map {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
}

.seat {
  width: 30px;
  height: 30px;
  margin: 5px;
  background-color: #ccc;
  cursor: pointer;
}

.seat.selected {
  background-color: #6c5ce7;
}

.seat.occupied {
  background-color: #ff7675;
  cursor: not-allowed;
}

3. JavaScript逻辑

接下来，我们需要使用JavaScript来处理座位的选择逻辑。我们将为每个座位添加点击事件，当用户点击座位时，切换座位的选中状态。

document.addEventListener('DOMContentLoaded', function() {
  const seats = document.querySelectorAll('.seat');

  seats.forEach(seat => {
    seat.addEventListener('click', function() {
      if (!seat.classList.contains('occupied')) {
        seat.classList.toggle('selected');
      }
    });
  });
});

3.1 处理已选座位

我们可以通过遍历所有座位来获取用户选择的座位信息。

function getSelectedSeats() {
  const selectedSeats = [];
  seats.forEach(seat => {
    if (seat.classList.contains('selected')) {
      const row = seat.getAttribute('data-row');
      const col = seat.getAttribute('data-col');
      selectedSeats.push({ row, col });
    }
  });
  return selectedSeats;
}

3.2 提交选座信息

当用户完成选座后，我们可以将选中的座位信息提交到服务器。

document.getElementById('submit-button').addEventListener('click', function() {
  const selectedSeats = getSelectedSeats();
  if (selectedSeats.length > 0) {
    // 提交选座信息到服务器
    fetch('/api/book-seats', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ seats: selectedSeats })
    })
    .then(response => response.json())
    .then(data => {
      alert('选座成功！');
    })
    .catch(error => {
      console.error('Error:', error);
    });
  } else {
    alert('请选择至少一个座位！');
  }
});

4. 处理已占用座位

在实际应用中，某些座位可能已经被其他用户预订。我们需要在页面加载时将这些座位标记为“已占用”。

function markOccupiedSeats(occupiedSeats) {
  occupiedSeats.forEach(seat => {
    const seatElement = document.querySelector(`.seat[data-row="${seat.row}"][data-col="${seat.col}"]`);
    if (seatElement) {
      seatElement.classList.add('occupied');
    }
  });
}

// 假设我们从服务器获取了已占用的座位信息
const occupiedSeats = [
  { row: 1, col: 1 },
  { row: 2, col: 3 }
];

markOccupiedSeats(occupiedSeats);

5. 总结

通过以上步骤，我们实现了一个简单的电影票选座功能。用户可以通过点击座位来选择或取消选择座位，系统会实时更新座位的状态，并在用户提交时处理选座信息。这个功能可以进一步扩展，例如添加更多的交互效果、处理更多的业务逻辑等。

希望本文对你理解如何使用JavaScript实现电影票选座功能有所帮助！