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的百分比宽度。 Here's a fiddle显示我的意思。

你可以通过写（{假设它们都是数字）来获得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

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

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

Answer 3

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

css进度条

3 个答案: