Bootstrap进度条不显示求助：基于MySQL数据计算任务进度

我来帮你排查下这个进度条不显示的问题，主要有几个关键问题需要修复，咱们一步步来：

1. 进度条宽度属性缺失（核心问题） #

你现在的代码里，进度条的style直接写了百分比值，但Bootstrap的进度条必须明确指定width属性才能生效！浏览器根本不知道你要设置的是宽度，所以进度条才会是空的。正确的写法应该是：

style="width: <?php echo $percentage; ?>%"

2. SQL查询可以优化 #

你用了GROUP BY ID，如果ID是表的主键（每条记录唯一），那分组后每个组的COUNT(*)都是1，最终$rows确实是4，但其实你只是要统计总记录数，完全不需要分组，直接用下面的查询更高效：

SELECT COUNT(*) AS total FROM `table1`

这样还能直接拿到总记录数，不用通过num_rows来获取。

3. 动态更新无障碍属性 #

你把aria-valuenow固定写死成40了，应该改成和百分比同步的动态值，这样更符合无障碍标准：

aria-valuenow="<?php echo $percentage; ?>"

4. 加上错误处理更稳妥 #

现在的代码没有处理数据库连接失败、查询出错的情况，万一数据库连不上，你根本不知道问题出在哪，加个简单的错误判断能帮你快速排查问题。

修复后的完整代码 #

<h4>Task 1</h4>
<div class="progress progress-striped">
    <?php
    // 初始化数据库连接
    $mysqli = new mysqli("localhost", "root", "", "db1");
    
    // 检查连接是否成功
    if ($mysqli->connect_error) {
        die("数据库连接失败: " . $mysqli->connect_error);
    }

    // 准备查询：直接统计总记录数，不需要分组
    $query = $mysqli->prepare("SELECT COUNT(*) AS total FROM `table1`");
    if (!$query) {
        die("查询准备失败: " . $mysqli->error);
    }
    
    $query->execute();
    $query->bind_result($totalRows); // 把查询结果绑定到变量
    $query->fetch(); // 获取结果
    
    // 计算百分比，确保不超过100%，同时保留两位小数更美观
    $percentage = min(($totalRows / 120) * 100, 100);
    $percentage = number_format($percentage, 2);
    ?>
    <div class="progress-bar progress-bar-success" 
         role="progressbar" 
         aria-valuenow="<?php echo $percentage; ?>" 
         aria-valuemin="0" 
         aria-valuemax="100" 
         style="width: <?php echo $percentage; ?>%">
        <?php echo $percentage; ?>%
    </div>
</div>

额外说明 #

• 我加了min()函数，防止当记录数超过120时，百分比超过100%导致进度条溢出；
• 用number_format()把百分比保留两位小数，显示起来更整洁；
• 补充了连接和查询的错误处理，方便你排查潜在问题。

内容的提问来源于stack exchange，提问作者Sarah_Salar