Индикатор выполнения не полностью занят после достижения 100% - PullRequest
Новая
       9

Индикатор выполнения не полностью занят после достижения 100%

0 голосов
/ 25 февраля 2020

Я загружаю свои sql данные, используя ajax. Затем я помещаю oop в sql массив данных и обновляю прогресс на индикаторе выполнения. Но, индикатор выполнения не полностью занят, событие достигает 100%. Почему это так? enter image description here

<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_2 php

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

?>

Заранее спасибо.

1 Ответ

0 голосов
/ 25 февраля 2020

Процентное значение, которое мы добавляем к 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;
                                }

                            }
                        })
...