如何在JavaScript中按百分比增减hh:mm:ss格式的时长

嘿，作为JS新手碰到这个需求很正常，我来一步步帮你搞定！核心思路其实很简单：先把hh:mm:ss格式的时长转换成总秒数（方便做数值计算），完成百分比增减后，再把总秒数转回到时分秒格式就好啦。

1. 把hh:mm:ss转成总秒数 #

先写个小函数，把时分秒字符串拆成小时、分钟、秒，再计算总秒数：

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

比如输入'17:22:14'，会得到17*3600 + 22*60 +14 = 62534秒，这下就能轻松做百分比运算了。

2. 按百分比调整总秒数 #

这个函数负责接收总秒数和百分比，计算调整后的结果。正数是增加，负数就是减少：

function adjustSecondsByPercent(totalSeconds, percent) {
  // 把百分比转成乘数，比如6%就是1.06，-14.3%就是0.857
  const multiplier = 1 + percent / 100;
  // 用Math.round()把结果取整成整数秒，你也可以根据需求用floor/ceil
  return Math.round(totalSeconds * multiplier);
}

比如adjustSecondsByPercent(62534, 6)会得到约66286秒，adjustSecondsByPercent(62534, -14.3)会得到约53592秒。

3. 把总秒数转回hh:mm:ss格式 #

最后一步，把计算后的秒数转成带补零的时分秒格式（比如5分钟要显示成05）：

function secondsToTime(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;

  // 补零工具函数，确保单个数字前面加0
  const padZero = num => num.toString().padStart(2, '0');
  return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
}

比如输入66286秒，会返回18:24:46，完全符合咱们的需求。

4. 结合表单的完整交互示例 #

把上面的函数整合起来，再加上表单交互逻辑，直接就能用：

<input type="text" id="timeInput" value="17:22:14" placeholder="请输入hh:mm:ss格式时长">
<input type="number" id="percentInput" value="6" placeholder="百分比（正负都支持）">
<button onclick="calculateAdjustedTime()">计算调整后时长</button>
<p id="resultArea"></p>

<script>
// 先把三个工具函数放进来
function timeToSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

function adjustSecondsByPercent(totalSeconds, percent) {
  const multiplier = 1 + percent / 100;
  return Math.round(totalSeconds * multiplier);
}

function secondsToTime(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;

  const padZero = num => num.toString().padStart(2, '0');
  return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
}

// 表单交互函数
function calculateAdjustedTime() {
  const timeStr = document.getElementById('timeInput').value;
  const percent = parseFloat(document.getElementById('percentInput').value);
  const resultArea = document.getElementById('resultArea');

  // 简单的输入验证
  if (!/^\d{1,2}:\d{2}:\d{2}$/.test(timeStr)) {
    resultArea.textContent = "⚠️ 请输入正确的hh:mm:ss格式时长哦！";
    return;
  }
  if (isNaN(percent)) {
    resultArea.textContent = "⚠️ 请输入有效的百分比数值！";
    return;
  }

  // 计算并展示结果
  const totalSec = timeToSeconds(timeStr);
  const adjustedSec = adjustSecondsByPercent(totalSec, percent);
  const adjustedTime = secondsToTime(adjustedSec);

  resultArea.textContent = `✅ 调整后的时长：${adjustedTime}`;
}
</script>

小补充说明 #

• 如果不需要取整到整数秒，可以去掉Math.round()，但一般时长都是整数秒，所以取整更贴合实际场景。
• 输入验证部分可以根据你的业务需求增强，比如限制小时的最大值之类的。
• 百分比完全支持小数和负数，你说的增加14.3%、减少6%这些场景都能完美覆盖。

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