CSS进度条

发布于 2024-12-06 10:11:51 字数 539 浏览 0 评论 0原文

我有一个关于进度条的问题。我已经阅读了这里几乎所有的帖子，但看来我无法让它们在我的场景中工作。我有以下显示数字，例如 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。任何帮助将不胜感激。

原文

I have a question in regards to a progress bar. I've read pretty much all the posts here but it appears I can't make any of them work in my scenario.
I have the following which shows numbers such as 50/500 where 50 is the actual number and 500 is the max.

$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'] . "";

Most progress bars that I see depict timeframes, I need to visually show the fraction

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

How can I place this so I can have a progress bar depicting the progress?
I am sorry I am not good at css. Any help would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独夜无伴 2024-12-13 10:11:51

一种简单的方法是将一个 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 为进度条设置动画将是一件轻而易举的事。

One simple way of doing it is placing a div inside a larger div and setting the percentage width of the inner div. Here's a fiddle showing what I mean.

You can get the percentage of max_shields by writing (Assuming they are both numbers)

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

Apply the percentage as the width of the inner div.

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

It would be a breeze to animate that progress bar using jQuery animate if you wanted to.

回复收藏 0 原文

很糊涂小朋友 2024-12-13 10:11:51

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

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

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

And define styles as needed. Maybe a border for the container and a background colour for the main bar. That's all there is to a basic progress bar.

回复收藏 0 原文

摇划花蜜的午后 2024-12-13 10:11:51

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

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

回复收藏 0 原文

~没有更多了~