HTML+CSS+JavaScript实现仿猫眼电影购票选座

一、功能实现

（1）在页面左侧区域，单击“可选座位”，将座位设置为“已选座位”，一次最多选5

个座位。右侧座位号汇总区域显示已选中的座位号，并显示电影票总价。

（2）在页面左侧区域，单击“已选座位”，将座位设置为“可选座位”。右侧选座信息汇总区域取消相应的座位号，并显示电影票总价。

（3）单击页面右侧选座信息汇总区域座位号右上角的“×”，将座位设置为“可选座位”。选座信息汇总区域取消相应的座位号，并显示电影票总价。

（4）“已选座位”数量不为0时，“确认选座”按钮设置为可用状态，选座信息汇总区域显示。“已选座位”数量为0时，“确认选座”按钮设置为不可用状态，选座信息汇总区域隐藏。

案例在Chrome浏览器运行效果，如图9-1所示。

 二、HTML布局

1.页面左侧选座区域布局

由图9-1可知，左侧选座区域是8排10列，以第7排为例，介绍左侧选座区域布局，示例代码如下。CSS代码详见本书源码。

<div class="seats-wrapper">
   <div class="row">
      <span class="seat selectable" data-column-id="9" data-row-id="7" </span>
      <span class="seat selected" data-column-id="8" data-row-id="7" </span>
      <span class="seat selected" data-column-id="7" data-row-id="7" </span>
      <span class="seat selectable" data-column-id="6" data-row-id="7" </span>
      <span class="seat selectable" data-column-id="5" data-row-id="7" </span>
      <span class="seat selectable" data-column-id="4" data-row-id="7" </span>
      <span class="seat selectable" data-column-id="3" data-row-id="7" </span>
      <span class="seat empty" data-column-id="" data-row-id="7" data-st="E" </span>
      <span class="seat sold" data-column-id="2&#