如何按用户自定义时间间隔移除时间列表中的时段

现有前端代码 #

<div class="wrap_time">
    <h4>Time Interval added by user (in minutes)</h4>
    <input type="text" id="interval" value="90"/>
</div>

<p>Input converted to hour: <span class="convHour">0</span>:<span class="convMin">0</span></p>

<ul class="time_slot">
<li><span class="times">08:00</span></li>
<li><span class="times">08:15</span></li>
<li><span class="times">08:30</span></li>
<li><span class="times">08:45</span></li>
<li><span class="times">09:00</span></li>
<li><span class="times">09:15</span></li>
<li><span class="times">09:30</span></li>
<li><span class="times">09:45</span></li>
<li><span class="times">10:00</span></li>
<li><span class="times">10:15</span></li>
<li><span class="times">10:30</span></li>
<li><span class="times">10:45</span></li>
<li><span class="times">11:00</span></li>
</ul>

需求说明 #

需要实现按用户输入的分钟间隔，筛选时间列表中的时段：

• 保留列表首个可用时段
• 移除该时段后，用户设定间隔内的所有时段
• 重复上述逻辑，直到遍历完所有时段

示例：当输入90分钟间隔时，处理后的时间列表应为：

<ul class="time_slot">
<li><span class="times">08:00</span></li> 
<li><span class="times">09:30</span></li>
<li><span class="times">11:00</span></li>
</ul>

解决方案 #

可以通过以下步骤实现：

1. 时间转换工具函数 #

先把HH:MM格式的时间字符串转换成总分钟数，方便后续计算时间差：

function timeToMinutes(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  return hours * 60 + minutes;
}

2. 核心筛选逻辑 #

编写函数，根据间隔筛选出需要保留的时段：

function filterTimeSlots(intervalMinutes) {
  const timeList = Array.from(document.querySelectorAll('.time_slot .times')).map(el => el.textContent);
  const filtered = [];
  if (timeList.length === 0) return filtered;

  // 保留第一个时段
  let lastKeptTime = timeToMinutes(timeList[0]);
  filtered.push(timeList[0]);

  // 遍历剩余时段
  for (let i = 1; i < timeList.length; i++) {
    const currentTime = timeToMinutes(timeList[i]);
    // 当前时间与上一个保留时间的差 >= 设定间隔，就保留
    if (currentTime - lastKeptTime >= intervalMinutes) {
      filtered.push(timeList[i]);
      lastKeptTime = currentTime;
    }
  }
  return filtered;
}

3. 更新DOM列表 #

编写函数，将筛选后的时段重新渲染到页面：

function updateTimeSlots() {
  const intervalInput = document.getElementById('interval');
  const intervalMinutes = parseInt(intervalInput.value) || 0;
  if (intervalMinutes <= 0) return; // 处理无效输入

  const filteredTimes = filterTimeSlots(intervalMinutes);
  const timeSlotUl = document.querySelector('.time_slot');
  
  // 清空原有列表
  timeSlotUl.innerHTML = '';
  
  // 添加筛选后的时段
  filteredTimes.forEach(time => {
    const li = document.createElement('li');
    li.innerHTML = `<span class="times">${time}</span>`;
    timeSlotUl.appendChild(li);
  });
}

4. 绑定事件监听 #

给输入框添加事件，实时响应用户输入：

// 页面加载时先执行一次，初始化列表
document.addEventListener('DOMContentLoaded', () => {
  updateTimeSlots();
  
  // 监听输入框变化
  const intervalInput = document.getElementById('interval');
  intervalInput.addEventListener('input', updateTimeSlots);
  intervalInput.addEventListener('change', updateTimeSlots);
});

补充说明 #

• 代码兼容输入框的实时输入和失焦变化，用户修改间隔后会自动更新列表
• 加入了无效输入判断（比如非数字、小于等于0的间隔），避免出错
• 逻辑严格遵循需求：从第一个时段开始，每次保留间隔外的下一个最早时段

内容的提问来源于stack exchange，提问作者Ser Rockwell