使用 JavaScript 实现的在线选座订票插件

    使用 JavaScript 创建一个在线选座预订票插件，可适用于电影院、演唱会、剧场等有在线售票需求的网站及服务，用户可通过点击复选框选择座位，代码校验了用户在选择座位前需输入姓名和所需座位数，选择完座位后，点击「锁定座位」后会在文本区域显示所选座位列表、用户姓名及座位数。该代码已经提供了选座订票几乎全部功能，您可以在此基础上对外观及功能进行简单升级改造为一个线上电影票预订系统。

下面介绍如何使用 Javascript 创建电影票选座预订系统

1.首先，将以下 HTML 结构复制到 HTML 文件中。该结构包括座位复选框、用户姓名和座位数输入框以及所选信息的显示区域。

<body onload="onLoaderFunc()">

<div class="inputForm">
<center>
  姓名 *: <input type="text" id="Username" required>
  座位数 *: <input type="number" id="Numseats" required>
  <button onclick="takeData()">Start Selecting</button>
</center>
</div>
  

<div class="seatStructure">
<center>
  
<table id="seatsBlock">
 <p id="notification"></p>
  <tr>
    <td colspan="14"><div class="screen">屏幕区域</div></td>
    <td rowspan="20">
      <div class="smallBox greenBox">已选择区域</div> 

      <div class="smallBox redBox">保留区域</div>

      <div class="smallBox emptyBox">可选区域</div>

    </td>
  </tr>
  
  <tr>
    <td></td>
    <td>1</td>
</tr>
  
<tr>
    <td>A</td>
    <td><input type="checkbox" class="seats" value="A1"></td>
    <td class="seatGap"></td>
    <td><input type="checkbox" class="seats" value="A6"></td>
  </tr>
  /*这里仅展示部分示例代码，下载后查看完整版代码*/
  
<tr class="seatVGap"></tr>
  
  
</table>
  

<button onclick="updateTextArea()">Confirm Selection</button>
</center>
</div>
     
<div class="displayerBoxes">
<center>
  <table class="Displaytable">
  <tr>
    <th>姓名</th>
    <th>座位数</th>
    <th>座位列表</th>
  </tr>
  <tr>
    <td><textarea id="nameDisplay"></textarea></td>
    <td><textarea id="NumberDisplay"></textarea></td>
    <td><textarea id="seatsDisplay"></textarea></td>
  </tr>
</table>
</center>
</div>

2.在 CSS 文件或 HTML 文件的 <style> 标记中添加以下 CSS 样式。这将对界面组件进行样式调整，使布局更具视觉吸引力。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
.seatGap
{
  width:40px;
}

.seatVGap
{
  height:40px;
}

3.现在，使用以下 CDN 链接在 HTML 文件中加入 jQuery。代码的某些功能依赖于 jQuery。

<script src='./js/jquery.min.js'></script>

4.最后，添加以下 JavaScript 函数来激活订票功能。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
$(":checkbox").click(function() {
  if ($("input:checked").length == ($("#Numseats").val())) {
    $(":checkbox").prop('disabled', true);
    $(':checked').prop('disabled', false);
  }
  else
    {
      $(":checkbox").prop('disabled', false);
    }
});