在现代在线票务系统中，可视化选座功能是提升用户体验的重要组成部分。用户可以在购票过程中直观地查看座位布局，选择心仪的座位，这种交互方式大大提高了用户的参与感和满意度。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 构建一个影院选座系统。

效果演示

本系统实现了典型的影院选座界面。用户可以通过点击座位来选择或取消选择，系统会实时更新选座信息和总价。

页面结构

页面从上到下主要包括以下几个功能区域：座位展示区（seat-map）、状态说明区（status）、选座信息区（selected-info）。

座位展示区

座位展示区位于页面中央，采用网格布局展示所有座位。每个座位用一个小方块表示，不同颜色代表不同状态（可选、已选、已售）。

<div class="seat-map" id="seat-map"></div>

状态说明区

状态说明区展示了座位的不同状态及其对应的颜色标识，帮助用户快速识别座位状态。

<div class="status">

  <div class="status-item">

    <div class="status-color available"></div>

    <span>可选</span>

  </div>

  <div class="status-item">

    <div class="status-color selected"></div>

    <span>已选</span>

  </div>

  <div class="status-item">

    <div class="status-color sold"></div>

    <span>已售</span>

  </div>

</div>

选座信息区

选座信息区展示用户已经选择的座位信息及总价格，实时更新选座状态。

<div class="selected-info">

  <div id="selected-seats">暂未选座</div>

</div>

核心功能实现

数据结构设计

系统使用二维数组 seatData 来表示座位布局，其中1表示可选座位，0表示已售座位。

const seatData = [

  [1, 1, 1, 0, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 0, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

  [1, 1, 1, 1, 1, 1, 1, 1],

];

座位初始化

initSeatMap 函数负责根据座位数据生成可视化的座位布局。该函数遍历座位数据，为每个座位创建DOM元素，并根据座位状态设置相应的CSS类和数据属性。

function initSeatMap() {

  seatData.forEach((row, rowIndex) => {

    const rowDiv = document.createElement('div');

    rowDiv.className = 'seat-row';

    // 添加座位

    for (let i = 0; i < row.length; i++) {

      const seat = document.createElement('div');

      seat.className = row[i] === 0 ? 'seat sold' : 'seat available';

      seat.textContent = i+1;

      seat.dataset.row = rowIndex + 1;

      seat.dataset.number = i+1;

      seat.dataset.status = row[i];

      rowDiv.appendChild(seat);

    }

    seatMapElem.appendChild(rowDiv);

  });

}

选座交互处理

通过事件委托机制处理座位点击事件，实现座位状态切换。当用户点击座位时，系统会检查座位是否可选，如果是则切换其状态，并更新选座信息。

seatMapElem.addEventListener('click', (e) => {

  const seat = e.target.closest('.seat');

  if (!seat || seat.classList.contains('sold')) return;

  const currentStatus = seat.dataset.status;

  if (currentStatus === '1') { // 可选

    seat.classList.remove('available');

    seat.classList.add('selected');

    seat.dataset.status = '2';

  } else { // 已选

    seat.classList.remove('selected');

    seat.classList.add('available');

    seat.dataset.status = '1';

  }

  updateSelectedInfo();

});

选座信息更新

updateSelectedInfo 函数负责更新已选座位信息和总价显示。每当座位状态发生变化时，此函数会重新收集所有已选座位信息，更新显示内容和总价。

function updateSelectedInfo() {

  const selected = document.querySelectorAll('#seat-map .selected');

  const seatsList = Array.from(selected).map(seat => ({

    row: seat.dataset.row,

    number: seat.dataset.number

  }));

  // 动态更新座位信息容器

  const selectedSeatsElem = document.getElementById('selected-seats');

  selectedSeatsElem.innerHTML = ''; // 清空当前内容

  if (seatsList.length === 0) {

    selectedSeatsElem.textContent = '暂未选座';

  } else {

    seatsList.forEach(seat => {

      const seatDiv = document.createElement('div');

      seatDiv.className = 'selected-seat-item';

      seatDiv.innerHTML = `<span>${seat.row}排${seat.number}座</span>

                <span>￥${pricePerSeat}</span>

            `;

      selectedSeatsElem.appendChild(seatDiv);

    });

  }

  // 更新总价和按钮文字

  const totalPrice = selected.length * pricePerSeat;

  const btnElem = document.getElementById('btn');

  btnElem.textContent = selected.length > 0 ? `确认选座 (￥${totalPrice})` : '请先选座';

}

扩展建议

座位锁定机制：增加座位锁定功能，防止多个用户同时选择同一座位

最佳座位推荐：根据观影体验推荐最佳座位区域

情侣座/家庭座：支持连续座位的选择限制

座位类型区分：区分普通座、VIP座等不同类型座位并设置不同价格

场次选择：支持不同时段场次的座位状态管理

座位图自定义：允许管理员自定义座位布局和区域划分

座位预订倒计时：为已选座位添加保留时间限制