Question

我正在编写一个PHP进度条，它将通过给出的百分比数字更新自己，但是我在解决百分比方面遇到了问题。

我的代码目前如下：

PHP

$percent = $_GET['percent'];

if($percent < 5)
    //low-image.jpg

elseif($percent > 95)
   //high-image.jpg

else{
$lowpercent = 100 - $percent;

$highwidth = 270 / 100 * $percent;
$lowwidth = 270 / 100 * $lowpercent;

HTML

<div class="first"></div>
<div class="mid-first" style="width:<?=$highwidth?>px;"></div>
<div class="mid-second" style="width:<?=$lowwidth?>px;"></div>
<div class="last"></div>

CSS

.first. mid-first, .mid-second, .last{
    display:block;
    float:left;
    height:62px;
    }
.first{
    background:url(low.png);
    width:31px;
}
.mid-first{
    background:url(mid-first.png) repeat-x;
}
.mid-second{
    background:url(mid-second.png);
}
.last{
    background:url(high.png);
    width:32px;
}

问题

目前百分比的测量结果有点不正确，我的数学脑子今天似乎错了......

有4个div，第一个和最后一个div占5％，所以10％，中间div等于其他90％。

这意味着当通过$_GET传递图50时，它将计算出50％的中间条不包括5％的第一条，这是错误的，它应该占用前5％帐户，然后计算出50％的像素宽度？

如何更改百分比背后的数学来修复两个中间条，这样当应用50％时，两个中间条的像素相等？

Answer 1

完全没有理由使用像素。将div包含在包含div中并使用CSS中的百分比。

PHP：

$lowpercent = 100 - $percent;

HTML：

<div class="barwrapper">
    <div class="first"></div>
    <div class="mid-first" style="width:<?=($percent-5)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent-5)?>px;"></div>
    <div class="last"></div>
</div>

CSS：

.first{
    background:url(low.png);
    width:5%;
}
.last{
    background:url(high.png);
    width:5%;
}

或，如果您不希望将first和last从100％中删除：

<div class="first"></div>
<div class="barwrapper">
    <div class="mid-first" style="width:<?=($percent)?>px;"></div>
    <div class="mid-second" style="width:<?=($lowpercent)?>px;"></div>
</div>
<div class="last"></div>

CSS：

.first{
    background:url(low.png);
    width:30px;
}
.last{
    background:url(high.png);
    width:30px;
}

Answer 2

您应该将宽度转换为整数，因为它也可以是浮点数，您可以通过简单地从总数中减去第一个条形宽度来计算第二个条形的宽度。

// We have already used 10 percents, so let's substract them
$percent = $percent - 10;

// We can't have negative percents, right?
if ($percent < 0) $percent = 0;

// Calculate 1st bar
$highwidth = (int) 270 / 100 * $percent;

// 100% - 1st bar = 2nd bar
$lowwidth = 270 - $highwidth;

Answer 3

您应该将$ highwidth和$ lowwidth转换为整数，然后再将它们写入css或html。因为它们是浮点数。

我认为这可行：

$percent = $_GET['percent'];

if($percent < 5)
    //low-image.jpg

elseif($percent > 95)
   //high-image.jpg

else{
    $highwidth = intval(270 / 90 * ($percent-5));
    $lowwidth = 270 - $highwidth;
}

编写基于动态PHP css的进度条 - 数学百分比问题

3 个答案: