如何创建百分比图像

我正在学习PHP，我只是做了一个简单的投票投票。它的工作原理和显示每个问题的百分比（总共有3个问题），但我也想显示一个显示百分比的栏（所以如果第一个问题是50％，栏是100px，则该问题应该是50px）。如何创建百分比图像

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

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

来源

2012-10-02 Dzumla

任何特别的原因使用图片代替HTML？ –

知道所有这些变量代表什么可能会有所帮助... – Salketer

任何事情都很好，只要它设置了一个确定的酒吧大小，然后缩小到每个问题的百分比。 – Dzumla

你要求的图像，但是这很容易在HTML完成：

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

来源

2012-10-02 13:20:27

好的！我修改了这一点，当然使用了PHP变量，但这基本上救了我。谢谢！ – Dzumla

你在这复杂。

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


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

来源

2012-10-02 13:21:03 wesside

OP想要动态造型。 –

所以把它内联。没有人阻止他。 – wesside

其他人已经张贴了这个，但我的编码样本，并决定将它张贴反正

现场样品：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-02 13:24:21 Dutchie432

我在你的代码上玩了一下：http://jsfiddle.net/vG6jy/6/ :)我很无聊:) –

@MihaiIorga：在这种情况下，为什么不简单地使用CSS3动画？ :) –

@MihaiIorga：太棒了！ PS - IE不支持CSS3动画吗？我喜欢这个jQuery方法 – Dutchie432

如何创建百分比图像

回答

相关问题