圆形工作时长进度条周五午餐时间区间位置异常问题求助

嘿，我碰到过类似的时间区间计算坑，咱们来一步步搞定你这个周五午餐位置偏移的问题～

问题根源分析 #

你的问题几乎可以确定是午餐区间的位置计算没有关联动态变化的工作时长：

• 平日按固定工作时长（比如8小时）计算午餐在进度条上的相对比例
• 周五工作时长缩短到7小时后，代码还是沿用了平日的时长基准来计算比例，导致午餐区间被错误地“拉”到更接近工作时长终点的位置

具体修复方案 #

核心思路是：让午餐区间的起始/结束位置，基于当日实际工作时长动态计算比例，再映射到进度条的角度（或进度值）上。

给你一段可参考的代码修改示例：

// 先判断当日是周几，返回对应的工作时长
function getDailyWorkHours() {
  const today = new Date().getDay();
  // 周五返回7小时，其他工作日返回8小时（可根据你的实际规则调整）
  return today === 5 ? 7 : 8;
}

// 计算午餐在进度条上的相对位置（假设午餐从工作开始后第4小时开始，持续1小时）
function getLunchPositionRatio(workHours) {
  const lunchStartHour = 4;
  const lunchDuration = 1;
  
  // 计算午餐起始、结束在总工作时长中的占比
  const startRatio = lunchStartHour / workHours;
  const endRatio = (lunchStartHour + lunchDuration) / workHours;
  
  return { startRatio, endRatio };
}

// 重写你的进度条创建函数
createProgressBar = function(bar) {
  const dailyWorkHours = getDailyWorkHours();
  const lunchPosition = getLunchPositionRatio(dailyWorkHours);
  
  var options = {
    start: 0,
    width: bar.getAttribute('data-width'),
    height: bar.getAttribute('data-height'),
    // 将计算好的比例传入进度条配置（根据你的进度条API调整参数名）
    lunchStart: lunchPosition.startRatio * 360, // 假设进度条是360度圆形
    lunchEnd: lunchPosition.endRatio * 360,
    // 其他原有配置...
  };
  
  // 后续创建进度条的逻辑...
};

额外检查点 #

• 检查代码中是否有硬编码的午餐位置值（比如直接写死lunchStart: 180），这种固定值一定会在工作时长变化时出错
• 如果你的进度条是按分钟数映射进度，记得把小时转换成分钟来计算比例（比如把4小时改成240分钟）
• 测试验证：平日8小时时，午餐起始比例是4/8=0.5（对应180度）；周五7小时时，比例是4/7≈0.571（对应≈205.7度），这个位置才是符合逻辑的

这样修改后，午餐区间的位置就会根据当日实际工作时长动态调整，不会再出现周五偏移的问题啦～

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