css индикатор выполнения - PullRequest
Новая
       12

css индикатор выполнения

2 голосов
/ 27 сентября 2011

У меня вопрос по поводу индикатора выполнения. Я прочитал почти все сообщения здесь, но, похоже, я не могу заставить ни одну из них работать в моем сценарии. У меня есть следующее, которое показывает числа, такие как 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. Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 27 сентября 2011

Один простой способ сделать это - поместить div в больший div и установить процентную ширину внутреннего div. Вот скрипка , показывающая, что я имею в виду.

Вы можете получить процент max_shields, написав (Предполагая, что оба числа) 

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

Применить проценткак ширина внутреннего делителя. 

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

Было бы просто оживить этот индикатор, используя jQuery animate , если вы хотите.

0 голосов
/ 13 августа 2013 
<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 голосов
/ 27 сентября 2011 
echo "<div class=\"progressbar_container\"><div class=\"progressbar\" style=\"width: ".($db_field['shields']/$db_field['max_shields']*100)."%\"></div></div>";

И определить стили по мере необходимости. Может быть, граница для контейнера и цвет фона для основной панели. Вот и все, что нужно для основного индикатора выполнения.

...