电影院选座位html css js

以下是一个简单的电影院选座位的HTML、CSS和JS代码示例：

HTML代码：

<div class="seat-container">
  <div class="screen"></div>
  <div class="seats"></div>
  <div class="price">Price: $<span id="price">0</span></div>
</div>

CSS代码：

.seat-container {
  margin: 20px auto;
  width: 600px;
  height: 400px;
  perspective: 1000px;
}

.screen {
  margin: 5px auto;
  width: 250px;
  height: 60px;
  transform: rotateX(-28deg);
  background-color: snow;
  box-shadow: 0 3px 10px rgba(250, 246, 246, 0.7);
}

.seats {
  margin: 20px auto;
  width: 500px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

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

.seat.selected {
  background-color: #f00;
}

JS代码：

const seats = document.querySelector('.seats');
const price = document.querySelector('#price');
let selectedSeats = [];

// 初始化座位
for (let i = 0; i < 60; i++) {
  const seat = document.createElement('div');
  seat.classList.add('seat');
  seat.addEventListener('click', () => {
    if (seat.classList.contains('selected')) {
      seat.classList.remove('selected');
      selectedSeats.splice(selectedSeats.indexOf(i), 1);
    } else {
      seat.classList.add('selected');
      selectedSeats.push(i);
    }
    price.innerText = selectedSeats.length * 10;
  });
  seats.appendChild(seat);
}

这段代码实现了一个简单的电影院选座位功能，包括座位的显示和选择，以及价格的计算。具体实现方法是：使用flex布局实现座位的排列，使用CSS3的transform属性实现屏幕的倾斜效果，使用JS监听座位的点击事件，根据座位的选中状态计算价格并更新页面显示。