0

指定されたパーセント値を介してそれ自体を更新する 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% と等しくなります。

これは、数字 50 が を介して渡される$_GETと、5% の最初の棒を含まない中央の棒の 50% が計算されることを意味します。これは間違っています。最初の 5% を考慮してから 50% を計算する必要があります。ピクセル幅？

パーセントの背後にある計算を変更して 2 つの中央のバーを修正し、50% が適用されたときに両方の中央のバーがピクセル単位で等しくなるようにするにはどうすればよいですか?

4

3 に答える 3

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、100%からlast離れたくない場合:

<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;
}
于 2013-01-09T18:46:41.860 に答える
0

幅は浮動小数点にもできるため、整数に変換する必要があります。合計から最初のバーの幅を差し引くだけで、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;
于 2013-01-09T18:41:37.947 に答える
-1

css または html に書き込む前に、$highwidth と $lowwidth を整数に変換する必要があります。そのままでは、浮動小数点数です。

私はこれがうまくいくと思います：

$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;
}
于 2013-01-09T18:35:48.257 に答える