在Jquery进度栏中显示百分比 [英] Display percentage in Jquery progressbar

问题描述

我的页面上有一个动态更新的进度条，我想在其中中间分配一个百分比，但我不知道怎么做.这是我页面上的进度条:

I have a progress bar updated dynamically in my page, I would like to dislay the percentage in middle of it, but I cannot figure out how. This is my progress bar on my page:

<div class="progress progress-striped active"> 
   <div id="prog" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span id="progress-value"></span>
   </div> 
</div>

这是我的jQuery代码，用于更新进度条:

This is my jQuery code that Updates the progress bar:

$.ajax({    
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var pct = evt.loaded / evt.total;

                $("#prog").css({ width: pct * 100 + '%' });
                $('#progress-value').html(pct * 100);

            }
        }, false);

        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var pct = evt.loaded / evt.total;

                $("#prog").css({ width: pct * 100 + '%' });
                $('#progress-value').html(pct*100);
                if (pct === 1) {
                    $('#prog').addClass('hide');
                }
            }
        }, false);
        return xhr;
    },

Ity更新进度栏，因为我看到它在数据加载过程中在进步，但它不显示百分比.我在做什么错了?

Ity updates the progress bar, as I see it progressing during data loading, but it doesn't display the percentage. What am I doing wrong?

推荐答案

我要做的是利用元素上的data-属性(在这种情况下，我将使用data-progress)以及content:属性用于CSS中的该元素.

What I would do is utilize the data- attribute on elements (in this case I'll use data-progress), and also the content: property for that element in CSS.

例如JQuery:

$.ajax({    
xhr: function () {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var pct = evt.loaded / evt.total;

            $("#prog").css({ width: pct * 100 + '%' })
                      .attr('data-progress', pct * 100 + '%');

        }
    }, false);

    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var pct = evt.loaded / evt.total;

            $("#prog").css({ width: pct * 100 + '%' })
                      .attr('data-progress', pct * 100 + '%');
            if (pct === 1) {
                $('#prog').addClass('hide');
            }
        }
    }, false);
    return xhr;
},

因此，在代码中，您将看到它在更新进度条上的物理宽度的同时，还同时更新了data属性.当然，CSS会使用新值自动更新.

So in the code, you will see that while it updates the physical width on the progress bar, it also updates the data attribute at the same time. Naturally, the CSS will auto update with the new value.

在CSS中，它将是:

#prog[data-progress] {
    position: relative;
}
#prog[data-progress]:before {
    position: absolute;
    content: attr(data-progress);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* this sets the text to be exactly in the middle of the parent element */
}

这篇关于在Jquery进度栏中显示百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！