Javascript 进度条达到100%后未完全占用_Javascript_Ajax_Progress Bar

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

javascript ajax

Javascript 进度条达到100%后未完全占用,javascript,ajax,progress-bar,Javascript,Ajax,Progress Bar,我使用ajax加载sql数据。然后，我在sql数据数组中循环，并在进度条上更新进度。但是，进度条未完全占用事件的百分比达到100%。为什么会这样？ $（文档）.ready（函数（） { $.ajax ({ 类型：'POST'， url:'13_2.php'，成功：功能（数据） { var data_array=JSON.parse（数据）；对于（i=0；i 提前感谢。我们添加到progressBar.style.width的百分比值必须具有%符号（例如：100%） $.ajax ({

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


$（文档）.ready（函数（）
{
$.ajax
({
类型：'POST'，
url:'13_2.php'，
成功：功能（数据）
{
var data_array=JSON.parse（数据）；
对于（i=0；i

提前感谢。

我们添加到

progressBar.style.width

的百分比值必须具有

符号（例如：100%）

$.ajax
({
类型：'POST'，
url:'13_2.php'，
成功：功能（数据）
{
var data_array=JSON.parse（数据）；
对于（i=0；i
<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>

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

?>

$.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;
                                }

                            }
                        })