如何创建百分比图像

Question

我正在学习PHP，我刚刚做了一个简单的投票调查。它可以显示每个问题的百分比(总共有3个问题)，但我也想显示一个显示百分比的条形图(所以如果第一个问题是50%，条形图是100px，那么这个问题的条形图应该是50px)。

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

$fr=舍入(($f/$total)*100)；$sr=整数(($s/$总计)*100)；$tr=整数(($t/$总计)*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; }