2

私は PHP を学んでいて、簡単な投票投票を行いました。それは機能し、各質問のパーセンテージを表示します (合計で 3 つの質問があります) が、パーセンテージを示すバーも表示したい (したがって、最初の質問が 50% でバーが 100px の場合、バーはその質問は 50px にする必要があります)。

最終的な数値 (パーセンテージ) を持つ変数は次のとおりです。

$fr = round(($f / $total) * 100); $sr = round(($s / $total) * 100); $tr = round(($t / $total) * 100);

4

3 に答える 3

2

画像を求めていますが、これは HTML で簡単に実現できます。

<div id="container" style="width: 100px">
    <div style="background-color:#F00;width=50%">&nbsp;</div>
</div>
于 2012-10-02T13:20:27.437 に答える
2

他の人はすでにこれを投稿していますが、私はサンプルをコーディングしていて、とにかく投稿することにしました

ライブサンプル: http://jsfiddle.net/vG6jy/4/

CSS

.bar{
    height:16px;
    width:300px;
    border:1px solid #999;   
    margin:15px;
    background: #b3bead;
    background: -moz-linear-gradient(top,  #b3bead 0%, #dfe5d7 60%, #fcfff4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bead), color-stop(60%,#dfe5d7), color-stop(100%,#fcfff4));
    background: -webkit-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: -o-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: -ms-linear-gradient(top,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    background: linear-gradient(to bottom,  #b3bead 0%,#dfe5d7 60%,#fcfff4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=0 );
}
.bar .value{
    height:100%;
    background: #87e0fd;
    background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );  
}  ​

HTML

<div class="bar">
    <div class="value" style="width:0%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:25%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:50%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:75%;"></div>
</div>
<div class="bar">
    <div class="value" style="width:100%;"></div>
</div>
​

PHP

<div class="bar">
    <div class="value" style="width:<?php echo $fr; ?>%;"></div>
</div>
于 2012-10-02T13:24:21.930 に答える
1

あなたはこれを複雑にしすぎています。

<div class="meter">
    <span class="percentage" style="width: 25%"></span>
</div>


.meter { width: 150px; border 2px solid #666; }
.percentage { background-color: #00FF00; }
于 2012-10-02T13:21:03.413 に答える