在JavaScript中基于给定时间数组与选中起止时间计算时长

你的问题出在依赖数组索引的差值来计算时长——当选择的时间跨午夜（比如晚上到凌晨）时，数组里12:00 AM的索引在最后，导致索引差为负数，自然得不到正确结果。我们需要把时间转换成24小时制的数值来统一计算，这样不管是否跨时段都能准确得出时长。

步骤1：先修复时间选项数组的错误 #

先提一下你数组里的几个输入错误，这些会导致后续匹配失败：

• {label: '010:00 PM', value: '10:00 PM'} → label多了个前置0，应该改成'10:00 PM'
• {label: '011:00 PM', value: '11:00 PM'} → label改成'11:00 PM'
• {label: '012:00 AM', value: '12:00 AM'} → label改成'12:00 AM'

修正后的数组才能保证后续逻辑正常运行，我会在示例代码里直接用修正后的版本。

步骤2：实现时间转24小时制的辅助函数 #

写一个函数把"HH:MM AM/PM"格式的字符串转换成对应的24小时制小时数，这是核心逻辑：

function convertTo24h(timeStr) {
  const [time, period] = timeStr.split(' ');
  let [hours] = time.split(':').map(Number);
  
  if (period === 'AM') {
    // 12 AM对应0点，其他AM时间保持原数值
    return hours === 12 ? 0 : hours;
  } else { // PM时段
    // 12 PM保持12点，其他PM时间加12
    return hours === 12 ? 12 : hours + 12;
  }
}

步骤3：计算时长的完整逻辑 #

利用上面的函数，把选中的开始/结束时间转换成24小时数值，再计算差值，同时处理跨天的情况：

const timeItems = [
 {label: 'Start Time', value: 'Start Time', selected: true},
 {label: '01:00 AM', value: '01:00 AM'},
 {label: '02:00 AM', value: '02:00 AM'},
 {label: '03:00 AM', value: '03:00 AM'},
 {label: '04:00 AM', value: '04:00 AM'},
 {label: '05:00 AM', value: '05:00 AM'},
 {label: '06:00 AM', value: '06:00 AM'},
 {label: '07:00 AM', value: '07:00 AM'},
 {label: '08:00 AM', value: '08:00 AM'},
 {label: '09:00 AM', value: '09:00 AM'},
 {label: '10:00 AM', value: '10:00 AM'},
 {label: '11:00 AM', value: '11:00 AM'},
 {label: '12:00 PM', value: '12:00 PM'},
 {label: '01:00 PM', value: '01:00 PM'},
 {label: '02:00 PM', value: '02:00 PM'},
 {label: '03:00 PM', value: '03:00 PM'},
 {label: '04:00 PM', value: '04:00 PM'},
 {label: '05:00 PM', value: '05:00 PM'},
 {label: '06:00 PM', value: '06:00 PM'},
 {label: '07:00 PM', value: '07:00 PM'},
 {label: '08:00 PM', value: '08:00 PM'},
 {label: '09:00 PM', value: '09:00 PM'},
 {label: '10:00 PM', value: '10:00 PM'},
 {label: '11:00 PM', value: '11:00 PM'},
 {label: '12:00 AM', value: '12:00 AM'}
];

// 示例：用户选择的开始和结束时间
const selectedStartTime = '09:00 AM';
const selectedEndTime = '11:00 AM';

// 获取对应的时间项
const startItem = timeItems.find(item => item.label === selectedStartTime);
const endItem = timeItems.find(item => item.label === selectedEndTime);

if (startItem && endItem) {
  const startHour = convertTo24h(startItem.value);
  const endHour = convertTo24h(endItem.value);
  
  let duration;
  if (endHour >= startHour) {
    duration = endHour - startHour;
  } else {
    // 跨午夜的情况，结束时间属于第二天，加24小时再计算
    duration = (endHour + 24) - startHour;
  }
  
  console.log(`时长：${duration}小时`); // 输出：时长：2小时
} else {
  console.log('无效的时间选择');
}

测试不同场景 #

• 跨AM到PM：selectedStartTime = '11:00 AM'，selectedEndTime = '02:00 PM' → 时长3小时
• 跨PM到AM：selectedStartTime = '10:00 PM'，selectedEndTime = '01:00 AM' → 时长3小时
• 午夜到凌晨：selectedStartTime = '12:00 AM'，selectedEndTime = '03:00 AM' → 时长3小时

这个方法完全不依赖数组的索引顺序，只关注时间本身的数值，所以能处理所有跨时段的情况。

内容的提问来源于stack exchange，提问作者we Devs