从持续时间计算 div 宽度百分比

calculate div width in percentage from time duration

我正在尝试计算 div 基于持续时间百分比的宽度

我有三个 div 根据两个日期之间的持续时间给它们宽度和填充背景颜色

lengthdiv1=2018-4-01 22:31:59 - 2018-01-01 00:00:00
lengthdiv2=2018-10-10 22:31:59 - 2018-4-01 22:31:59
lengthdiv3=2018-12-31 23:59:59 - 2018-10-10 22:31:59

 $maxWidth = 100; // total percentage 
$eventStart = strtotime('2018-01-01 00:00:00');
$eventEnd   = strtotime('2018-4-01 22:31:59');
$eventLength = $eventEnd - $eventStart;
$maxLength = 86400;
$ratio = $eventLength / $maxLength; 
$width = round($ratio * $maxWidth);

HTML 我尝试应用 div 百分比宽度的代码

 <div class="daylight">
    <div class="daytime standard" style="width: 20%; background: #D1F1AD;border-left: none;">3m 23d h4</div>
    <div class="daytime summer" style="width: 60%; background: #FDE492; text-align: center">3m 23d h4</div>
    <div class="daytime standard1" style=" background: #D1F1AD;width: 20%; ">3m 23d h4</div>
  </div>

这应该够用了。

<?php
    $dur1 = (strtotime("2018-04-01 22:31:59")) - (strtotime("2018-01-01 00:00:00"));
    $dur2 = (strtotime("2018-10-10 22:31:59")) - (strtotime("2018-4-01 22:31:59"));
    $dur3 = (strtotime("2018-12-31 23:59:59")) - (strtotime("2018-10-10 22:31:59"));

    $totDur = $dur1 + $dur2 + $dur3;

    $wid1 = round($dur1 * 100 / $totDur);
    $wid2 = round($dur2 * 100 / $totDur);
    $wid3 = round($dur3 * 100 / $totDur);

    echo $wid1, " ", $wid2, " ", $wid3;

这里的策略是

  1. 将给定的字符串转换为以秒为单位的时间戳(因为 epoch timestamp) using php's int strtotime ( string $time [, int $now = time() ] ).
  2. 以秒计算差异。
  3. 求总差。
  4. each difference / total difference 转换为百分比并将其 round 转换为最接近的整数。