JavaScript 实现同时选取多个时间段的方法

下面是 JavaScript 实现同时选取多个时间段的方法的完整攻略。

问题描述

假设有一个活动日历，在其中选取时间段有如下要求：

• 支持同时选取多个时间段，并可以拖拽选中时间段
• 已选取的时间段需要以特殊样式进行标记

如何实现这个功能呢？接下来，我们将分步骤讲解。

HTML 布局

首先，需要使用 HTML 布局来搭建前端页面。这里，我们可以使用 table 标签来呈现日历，每个时间段选项可以用 td 标签呈现，这些 td 标签再用 tr 标签组合在一起，整合成一个完整的日历。用一个 div 容器包含整个 table 标签。

<div id="calendar">
  <table>
    <thead>
      <tr>
        <th>时间段</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>上午</td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
      </tr>
      <tr>
        <td>下午</td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
      </tr>
      <tr>
        <td>晚上</td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
        <td class="available"></td>
      </tr>
    </tbody>
  </table>
</div>

CSS 样式

接下来，需要写一些 CSS 样式来美化整个页面。这里，我们可以对一些 td 元素指定颜色，这样在选取多个时间段时，已选取的时间段就会被特殊标记出来。

#calendar td.available {
  background-color: #ccc;
}

#calendar td.selected {
  background-color: green;
}

JS 实现

在 HTML 布局和 CSS 样式完成后，需要再添加 JavaScript 代码实现选取多个时间段。这里，我们可以借助一些第三方库，如 jQuery 和 jQuery UI。

首先，引入相应的 JS 库文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

然后，编写 JavaScript 代码，实现选中多个时间段的功能。

$(function() {
  var selected = [];

  // 鼠标按下时，记录选中的时间段
  $("#calendar td.available").mousedown(function() {
    $(this).addClass("selected");
    var index = $("#calendar td.available").index(this);
    selected.push(index);
  });

  // 鼠标移到其他时间段上时，记录选中的时间段
  $("#calendar td.available").mouseover(function() {
    if ($.inArray($("#calendar td.available").index(this), selected) == -1) {
      $(this).addClass("selected");
    }
  });

  // 鼠标弹起时，移除选中的样式，同时记录选中的时间段
  $(document).mouseup(function() {
    if (selected.length > 0) {
      selected.sort(function(a,b){return a-b});
      var startDate = $("#calendar td.available").eq(selected[0]).text() + '(' + $("#calendar thead th").eq(selected[0]+1).text() + ')';
      var endDate = $("#calendar td.available").eq(selected[selected.length - 1]).text() + '(' + $("#calendar thead th").eq(selected[selected.length - 1]+1).text() + ')';
      alert(startDate + '-' + endDate + '已选中');
    }
    $("#calendar td.selected").removeClass("selected");
    selected = [];
  });
});

上述 JavaScript 代码实现了以下功能：

• 特定 td 标签鼠标按下和鼠标移过选中时间段
• 记录选中时间段的索引，并标记为已选中
• 鼠标弹起时，记录选中时间段，移除已选中的样式，并弹出选中时间段的提示信息

这样，用户就可以使用鼠标来选中多个时间段了。

示例：选中相邻的时间段

示例：选中间隔的时间段