如何根据时间区间时长计算Div的百分比宽度并设置样式？

看起来你已经有了初步思路，但这里有几个关键细节需要调整，才能让三个Div的宽度准确对应各自的时间占比。我帮你梳理并修正整个实现逻辑：

核心问题修正 #

你当前代码里的$maxLength = 86400;是硬编码成了一天的秒数，但实际上我们需要的是整个时间周期的总长度（从2018-01-01 00:00:00到2018-12-31 23:59:59的总秒数），这样计算出来的比例才是真实的时间占比。另外，你只计算了第一个Div的宽度，需要对三个时间段分别做计算。

完整实现代码 #

首先是PHP部分，我们先计算所有需要的时间差和百分比：

// 定义所有关键时间点
$totalStart = strtotime('2018-01-01 00:00:00');
$div1End = strtotime('2018-04-01 22:31:59');
$div2End = strtotime('2018-10-10 22:31:59');
$totalEnd = strtotime('2018-12-31 23:59:59');

// 计算整个周期的总时长（秒数）
$totalLength = $totalEnd - $totalStart;

// 计算每个Div对应的时间长度
$div1Length = $div1End - $totalStart;
$div2Length = $div2End - $div1End;
$div3Length = $totalEnd - $div2End;

// 计算每个Div的宽度百分比（保留两位小数避免布局偏移）
$maxWidth = 100;
$div1Width = round(($div1Length / $totalLength) * $maxWidth, 2);
$div2Width = round(($div2Length / $totalLength) * $maxWidth, 2);
// 用100%减去前两个的宽度，避免四舍五入导致总宽度超过100%
$div3Width = 100 - $div1Width - $div2Width;

然后将计算好的宽度变量嵌入到HTML中：

<div class="daylight">
  <div class="daytime standard" style="width: <?php echo $div1Width; ?>%; background: #D1F1AD; border-left: none;">
    <?php echo floor($div1Length/(30*24*3600)) . 'm ' . floor(($div1Length%(30*24*3600))/(24*3600)) . 'd ' . floor(($div1Length%(24*3600))/3600) . 'h'; ?>
  </div>
  <div class="daytime summer" style="width: <?php echo $div2Width; ?>%; background: #FDE492; text-align: center;">
    <?php echo floor($div2Length/(30*24*3600)) . 'm ' . floor(($div2Length%(30*24*3600))/(24*3600)) . 'd ' . floor(($div2Length%(24*3600))/3600) . 'h'; ?>
  </div>
  <div class="daytime standard1" style="width: <?php echo $div3Width; ?>%; background: #D1F1AD;">
    <?php echo floor($div3Length/(30*24*3600)) . 'm ' . floor(($div3Length%(30*24*3600))/(24*3600)) . 'd ' . floor(($div3Length%(24*3600))/3600) . 'h'; ?>
  </div>
</div>

关键说明 #

• 用$totalLength作为基准计算占比，确保三个Div的宽度之和刚好是100%（最后一个Div用减法计算，避免四舍五入的误差）
• 时长显示部分手动计算了月、天、小时的格式，你可以根据需求调整显示逻辑
• 如果不需要保留小数，直接用round()取整即可，减法计算最后一个Div宽度的方式依然适用

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