进度条在达到 100% 后未被完全占用

Question

我使用 ajax 加载我的 sql 数据。然后，我在 sql 数据数组中循环并更新进度条上的进度。但是，进度条未完全占用事件的百分比达到 100%。为什么会这样？

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function()
            {
                        $.ajax
                        ({
                            type    :'POST',
                            url     :'13_2.php',

                            success :function(data)
                            {
                                var data_array = JSON.parse(data);
                                for(i=0;i<data_array.length;i++)
                                {
                                    perc                    =((i+1) / data_array.length * 100);
                                    perc                    =(Math.round(perc * 100) / 100).toFixed(2);
                                    var progressBar         =document.querySelector('.progress div');
                                    progressBar.style.width =perc;
                                    progressBar.innerHTML   =perc;
                                }

                            }
                        })

            })
        </script>
    </head>
    <body>
        <div class="bs-example">
            <div class="progress">
                <div class="progress-bar progress-bar-striped" style="min-width:0px;"></div>
            </div>

        </div>
    </body>
</html>

13_2php

<?php
$bdd             =new PDO();
$query           ="SELECT * FROM level_1";
$req             =$bdd->prepare($query);
$req->execute();
$nRows           =$bdd->query('select count(*) from level_1')->fetchColumn(); 
$result          =$req->fetchAll();
$encode          =json_encode($result);
echo $encode;

?>

提前致谢。

Answer 1

我们添加到 progressBar.style.width 的百分比值必须有 % 符号（例如：100%）。

$.ajax
                        ({
                            type    :'POST',
                            url     :'13_2.php',

                            success :function(data)
                            {
                                var data_array = JSON.parse(data);
                                for(i=0;i<data_array.length;i++)
                                {
                                    perc                    =((i+1) / data_array.length * 100);
                                    perc                    =(Math.round(perc * 100) / 100).toFixed(2);
                                    width                   =perc+ "%";
                                    var progressBar         =document.querySelector('.progress div');
                                    progressBar.style.width =width;
                                    progressBar.innerHTML   =width;
                                }

                            }
                        })

进度条在达到 100% 后未被完全占用

Progress bar not fully occupied after reach 100%

javascript

ajax

progress-bar