如何实现Bootstrap Timepicker每行前两个时间的求和计算

要实现每行前两个时间选择器的时间求和并填入总计字段，你可以借助Bootstrap Timepicker的change.timepicker事件，结合时间格式转换来完成，具体实现如下：

核心逻辑 #

• 监听可编辑时间选择器的时间变化事件
• 定位当前输入所在的行容器，获取该行的两个时间值
• 将HH:MM:SS格式的时间转换为总秒数进行计算，避免时分秒进位的复杂处理
• 计算总和后再转回HH:MM:SS格式，填入该行的总计输入框

完整代码实现 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<form action="" method="POST">
  <!-- 动态生成的行 -->
  <div class="input-group bootstrap-timepicker timepicker">
    <span>1.</span>
    <input type="text" class="form-control timepicker-input design-time" id="desingTime1" >
    <input type="text" class="form-control timepicker-input dev-time" id="devTime1" >
    <input type="text" class="form-control timepicker-input total-time" id="totalTime1" readonly disabled >
  </div>

  <div class="input-group bootstrap-timepicker timepicker">
    <span>2.</span>
    <input type="text" class="form-control timepicker-input design-time" id="desingTime2" >
    <input type="text" class="form-control timepicker-input dev-time" id="devTime2" >
    <input type="text" class="form-control timepicker-input total-time" id="totalTime2" readonly disabled >
  </div>
  
  <div class="input-group bootstrap-timepicker timepicker">
    <span>3.</span>
    <input type="text" class="form-control timepicker-input design-time" id="desingTime3" >
    <input type="text" class="form-control timepicker-input dev-time" id="devTime3" >
    <input type="text" class="form-control timepicker-input total-time" id="totalTime3" readonly disabled >
  </div>

  <button type="button" class="btn btn-primary">Submit</button>
</form>

<script>
// 初始化时间选择器
$('.timepicker-input').timepicker({
  maxHours: 24,
  showSeconds: true,
  showMeridian: false,
  defaultTime: '00:00:00'
});

// 辅助函数：将HH:MM:SS转换为总秒数
function timeToSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

// 辅助函数：将总秒数转换为HH:MM:SS格式
function secondsToTime(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;
  
  // 补零确保两位数格式
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

// 监听时间变化事件
$('.design-time, .dev-time').on('change.timepicker', function() {
  // 获取当前输入所在的行容器
  const $row = $(this).closest('.input-group');
  
  // 获取该行的设计时间和开发时间值
  const designTime = $row.find('.design-time').val();
  const devTime = $row.find('.dev-time').val();
  
  // 计算总秒数并转换为时间格式
  const totalSeconds = timeToSeconds(designTime) + timeToSeconds(devTime);
  $row.find('.total-time').val(secondsToTime(totalSeconds));
});
</script>

代码说明 #

1. 新增类名优化定位：给每行的三个输入框分别添加design-time、dev-time、total-time类，比依赖ID更灵活，适配动态生成的行结构。
2. 时间转换函数：
   • timeToSeconds：拆分时分秒字符串为数字，计算总秒数，规避时分秒进位的复杂逻辑。
   • secondsToTime：将总秒数转回时分秒格式，用padStart(2, '0')确保每个时间部分都是两位数（如9秒转为09）。
3. 事件监听：仅监听前两个可编辑的时间框，时间变化时自动定位所在行，计算总和并更新总计框，无需手动触发。

内容的提问来源于stack exchange，提问作者Hasib Hosen