php表中的进度条

Question

我有一个问题，或者更确切地说是我一直在互联网上研究如何放置进度条的问题。他们都使用样式方法给出百分比。 如果有人可以支持我，我想在我的 php 代码中添加一个进度条。我会很感激的。

正如您在图片中看到的我的总时间百分比，它已经显示了百分比。现在我想用进度条显示该百分比。

我试图展示它，但它只需要我一张记录。

<br><br>
    <div class="barra">
        <div class="progreso"><div class="porcentaje"></div></div>
    </div>

  <script type="text/javascript">
    document.getElementsByClassName("progreso")[0].style.width = "<?php echo $porcentaje; ?>%";
    document.getElementsByClassName("porcentaje")[0].innerHTML = "<?php echo $porcentaje; ?>%";
</script>

<?php
@ob_flush();
flush();
$total = substr($user->finish, 0, 4)  -substr($user->start, 0, 4) + 1;
$current = substr($user->diasf, 0, 4);
$porcentaje = ($current/$total) * 100;
$porcentaje = round($porcentaje, 0); 
    ?>

 <?php
@ob_flush();
flush();
usleep(500);?>


 <thead>
 
      <th style=""; class="button-3"> Persona Asignada</th>
      <th style=""; class="button-4"> Tarea</th>
      <th style=""; class="button-3">Descripcion</th>
      <th style=""; class="button-3">Dias Asignados</th>
      <th style=""; class="button-3">Dia Finalizado</th>
      <th style=""; class="button-3">% Total tiempo</th>
      
      </thead>
      <?php
      foreach($users as $user){
        ?>
        <tr>
          
      
          <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->persona, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->title, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->description, 0, 200);; ?></td>
        <td class="bg-info text-white" style="color:#070001"><?php echo  substr($user->finish, 0, 200)-substr($user->start, 0, 200) + 1;; ?> Dias</td>
        <td class="bg-info text-white" style="color:#070001"><?php echo substr($user->diasf, 0, 200);; ?> Dias</td>
        <td class="bg-info text-white" style="color:#070001"> 

        <?php 
$total = substr($user->finish, 0, 4)  -substr($user->start, 0, 4) + 1;
$current = substr($user->diasf, 0, 4);
$percent = ($current/$total) * 100;
$percent = round($percent, 0); 

// echo "$current es $percent% of $total.
// <p />";

?>

---

以下是修复前后的截图
在没有修复之前：

使用@Emrah Tuncel 的解决方案后：

Answer 1

这就是没有 javascript 的情况。

<?php foreach($users as $user){ ?>

    ...

    <td class="bg-info text-white" style="color:#070001; width:200px;"> 
        <?php 
        $total   = substr($user->finish, 0, 4)  - substr($user->start, 0, 4) + 1;
        $current = substr($user->diasf, 0, 4);
        $percent = ($current/$total) * 100;
        $percent = round($percent, 0); 
        ?>
        <div class="barra" style="background: #EEE; width: 100%; height: 10px; position: relative;">
            <div class="progreso" style="height: 100%; width: <?=$percent?>%; background: green;"><div class="porcentaje"></div></div>
        </div>
    </td>
<?php } ?>

您需要自定义的地方；

1. td 样式中的宽度值。 （宽度：200px）
2. barra div 样式中的背景值。 （背景：#EEE；高度：10px）
3. progreso div 样式中的背景值。 （背景：绿色）