返回

Js 特效案例：电影票选座指南

人工智能

Js 特效案例：电影票选座指南

一、HTML布局

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="screen">
      <div class="movie-title">电影名称</div>
      <div class="seats">
        <ul>
          <li class="seat" data-row="1" data-column="1"></li>
          <li class="seat" data-row="1" data-column="2"></li>
          <li class="seat" data-row="1" data-column="3"></li>
          ...
        </ul>
      </div>
    </div>
    <div class="legend">
      <div class="seat available"></div>
      <span>可售票</span>
      <div class="seat selected"></div>
      <span>已选票</span>
      <div class="seat booked"></div>
      <span>已售票</span>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

二、CSS样式

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  width: 800px;
  height: 600px;
  background-color: black;
  margin: 0 auto;
  position: relative;
}

.movie-title {
  color: white;
  font-size: 24px;
  text-align: center;
  padding: 10px;
}

.seats {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.seat {
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #ccc;
  border: 1px solid #666;
  cursor: pointer;
}

.seat.available {
  background-color: #0f0;
}

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

.seat.booked {
  background-color: #888;
}

.legend {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

三、JavaScript脚本

const seats = document.querySelectorAll('.seat');
const legend = document.querySelector('.legend');

let selectedSeats = [];

seats.forEach((seat) => {
  seat.addEventListener('click', (e) => {
    if (seat.classList.contains('available')) {
      seat.classList.add('selected');
      selectedSeats.push(seat);
    } else if (seat.classList.contains('selected')) {
      seat.classList.remove('selected');
      selectedSeats = selectedSeats.filter((s) => s !== seat);
    }

    updateLegend();
  });
});

function updateLegend() {
  const availableSeats = legend.querySelector('.available');
  const selectedSeatsCount = legend.querySelector('.selected-count');
  const bookedSeats = legend.querySelector('.booked');

  availableSeats.textContent = `可售票：${seats.length - selectedSeats.length}`;
  selectedSeatsCount.textContent = `已选票：${selectedSeats.length}`;
  bookedSeats.textContent = `已售票：0`;
}

结束语

这个 JavaScript 电影票选座特效案例中，我们使用了 HTML、CSS 和 JavaScript 来构建一个交互式的选座界面。当用户点击座位时，座位会根据其状态（可用、已选择或已预订）而改变颜色。同时，选座情况会实时更新在界面底部的图例中。这个特效可以很容易地集成到任何电影售票系统中，为用户提供更直观和有趣的选座体验。