进度增加值不能很好地与百分比配合使用

progress increase value not working well with percent

本文关键字：百分比 增加值 不能 很好      更新时间：2023-09-26

http://jsfiddle.net/2gsNy/1/

我想让它+10，为第一个工作，但第二个和之后它比10增加的方式。

我的 JS

$('#test').on('click', function (e) {
    $this = $('#progressbarr > div').width();
    var i = $this + 10;
    $('#progressbarr > div').css('width', (i + '%'));
    $progress_bar = $('#progressbarr');
    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());
    $progress_bar.find('span').text(progressbar_width + '%');
});

如果使用console.log（），您可以看到您使用的宽度不是百分比，而是像素单位。

尝试直接访问样式属性以检索"xx%"值。

试试下面的jsfiddle

在 Css 中，更改 

#progressbarr > div {
    background-color: green;
    width: 0px;
    height: 25px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

Jquery

$('#test').on('click', function (e) {
    $this = $('#progressbarr > div').width();
    var i = $this + 30;        
    $progress_bar = $('#progressbarr');
    var progressbar_width = Math.floor(100 * (i) / $progress_bar.width());        
    if (progressbar_width <= 100)
    {
        $('#progressbarr > div').css('width', (i + 'px'));
        $progress_bar.find('span').text(progressbar_width + '%');
    }
});

在您的情况下，这确实有效：（jsFiddle）

$('#test').on('click', function (e) {
    $progress_bar = $('#progressbar');
    var i = 30;
    $('#progressbar > div').css('width', '+=' + (i + 'px'));

    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());
    $progress_bar.find('span').text(progressbar_width + '%');
});

但前提是你让你的progressbar width 300px.

试试这个 http://jsfiddle.net/devmgs/2gsNy/7/

$('#test').on('click', function (e) {
    var width = $('#progressbarr > div').width();   
    var parentWidth = $('#progressbarr').width();
    var percent = 100*width/parentWidth;
    console.log(percent);
    percent+=10;
    $('#progressbarr > div').width(percent+"%");
    $('#progressbarr > div').find('span').text(percent + '%');
});

试试这个jsfiddle

$('#test').on('click', function (e) {
    var progress = parseInt($(".percentage").html());
       $this = $('#progressbarr > div').width();
    var i = progress + 10;
    $('#progressbarr > div').css('width', (i + '%'));
    $progress_bar = $('#progressbarr');
    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width()) / $progress_bar.width());
    $progress_bar.find('span').text(progressbar_width + '%');
    // if
});
相关文章：