CSS进度条

Question

我对进度条有疑问。 我在这里阅读了几乎所有文章，但看来我无法在我的情况下使用其中的任何文章。 我有以下显示数字，例如50/500，其中50是实际数字，而500是最大数字。

$SQL = "SELECT * FROM db_ships WHERE ship_id = $user[ship_id] LIMIT 1";
$result = mysql_query($SQL);

while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['shields'] . " / ";
print $db_field['max_shields'] . "";

我看到的大多数进度条都描绘了时间范围，我需要直观地显示分数

print $db_field['shields'] . " / ";
    print $db_field['max_shields'] . "";

我该如何放置它，以便有一个进度条来描述进度？ 对不起，我不擅长CSS。 任何帮助将不胜感激。

Answer 1

一种简单的实现方法是将div放在较大的div内并设置内部div的百分比宽度。 这是一个小提琴，显示了我的意思。

您可以通过写入获得max_shields的百分比（假设它们都是数字）

$percentage = $db_field['shields'] * ($db_field['max_shields'] / 100);

应用百分比作为内部div的宽度。

<div id="progress-inner" style="width: <?php echo $percentage; ?>%;"></div>

如果需要的话，使用jQuery animate对进度条进行动画处理将很容易。

Answer 2

<style type="text/css">
.table, th
{
background-color:Blue;
border-collapse:collapse;
}
<table class="table" >
        <tr id = "row1" >
            <td id ="cell1" class="td"></td>
        </tr>
    </table>    
  <script language="javascript" type="text/javascript" >

    var i = 1;
    var timerID = 0;
    timerID = setTimeout("progress()",200); 
    var scell = '';
    var sbase = '';
    sbase = document.getElementById("cell1").innerHTML;

function progress()
{

    var tend = "</tr></table>";
    var tstrt = "<table><tr>";
    scell = scell + "<td style='width:15;height:25' bgcolor=blue>";

    document.getElementById("cell1").innerHTML = sbase + tstrt +  scell + tend; 


     if( i < 50) 
    {                    
        i = i + 1;

        timerID = setTimeout("progress()",200); 
    }
    else
     {
        if(timerID)
        {
   document.getElementById("cell1")
      .innerHTML=document.getElementById("cell1").innerHTML 
      + "</tr></table>";
            clearTimeout(timerID);

        }
     }

  }
     </script>

Answer 3

echo "<div class=\"progressbar_container\"><div class=\"progressbar\" style=\"width: ".($db_field['shields']/$db_field['max_shields']*100)."%\"></div></div>";

并根据需要定义样式。 可能是容器的边框和主栏的背景色。 这就是基本进度条的全部内容。