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

並根據需要定義樣式。 可能是容器的邊框和主欄的背景色。 這就是基本進度條的全部內容。