Question

我正在学习PHP，我刚做了一个简单的投票调查。它工作并显示每个问题的百分比（总共有3个问题），但我还要显示一个显示百分比的条形图（因此，如果第一个问题是50％且条形图是100px，则为那个问题应该是50px）。

以下是具有最终数字（百分比）的变量。

$ fr = round（（$ f / $ total）* 100）; $ sr = round（（$ s / $ total）* 100）; $ tr = round（（$ t / $ total）* 100）;

Answer 1

您要求提供图片，但这很容易在HTML中完成：

<div id="container" style="width: 100px">
    <div style="background-color:#F00;width=50%">&nbsp;</div>
</div>

Answer 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>

Answer 3

你的结果太复杂了。

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


.meter { width: 150px; border 2px solid #666; }
.percentage { background-color: #00FF00; }

如何创建百分比图像

3 个答案: