php - 如何创建百分比图像

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; }