单击时将百分比添加到进度条

Question

我在表单上使用了进度条。 我不想添加没有小数的百分比。 当条形高于条形 33.33% 时，应该有一个“33%”。

当我四处搜索时，我只能找到动画加载条的百分比，而不是点击。

这是我的进度条 2 个例子。

(function($){
    // First bar
    $('.nav.one .next').click(function(){
        // Animate progressbar
        $(".progressbar.one").animate({
            width: "+=33.33%"
        },"slow"); 
    });
    $('.nav.one .prev').click(function(){
        // Animate progressbar
        $(".progressbar.one").animate({
            width: "-=33.33%"
        },"slow"); 
    });
    
    // Second bar
  $('.nav.two .next').click(function(){
        // Animate progressbar
        $(".progressbar.two").animate({
            width: "+=25%"
        },"slow"); 
    });
    $('.nav.two .prev').click(function(){
        // Animate progressbar
        $(".progressbar.two").animate({
            width: "-=25%"
        },"slow"); 
    });
})(jQuery);

.progressbar {
  height: 20px;
  background: lightblue;
  display: inline-block;
}
.progressbar.one {
  width: 33.33%;
}
.progressbar.two {
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I wan't to show progress bar percent here</p>
<div class="progressbar one"></div>
<div class="nav one"><button class="prev">Prev</button> | <button class="next">Next</button></div>
<hr />
<p>I wan't to show progress bar percent here</p>
<div class="progressbar two"></div>
<div class="nav two"><button class="prev">Prev</button> | <button class="next">Next</button></div>

Answer 1

在这里，我在开始时将宽度 var 初始化为 33.33，当我点击 next 时，我将 33.33 增加到变量，当我点击 prev 时，我将 33.33 减少到变量，并使用 html JQuery 函数显示它。

给你！

编辑：您可以使用 ceil 函数使其等于 33% 而不是 33.33% 我添加了代码以在宽度等于 0% 时禁用上一个按钮

(function($){
// Initialize width and default width
var width = 33.33;
$('#percent').html('33.33 %');
$('.next').click(function(){
        // Increment width by 33.33% and show it
				width += 33.33;
        $('#percent').html(width + ' %');
        // Animate progressbar
        $(".progressbar").animate({
            width: "+=33.33%"
        },"slow"); 
        // Disable prev button if width is equal to 0
        if(width == 0){
          $('.prev').attr('disabled','disabled');
        }
        else {
          $('.prev').removeAttr('disabled');
        }
    });
    $('.prev').click(function(){
        // Decrease width by 33.33% and show it
    		width -= 33.33;
        $('#percent').html(width + ' %');
        // Animate progressbar
        $(".progressbar").animate({
            width: "-=33.33%"
        },"slow"); 
        // Disable prev button if width is equal to 0
        if(width == 0){
          $(this).attr('disabled','disabled');
        }
        else {
          $(this).removeAttr('disabled');
        }
    });

})(jQuery);

.progressbar {
  width: 33.33%;
  height: 20px;
  background: lightblue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I wan't to show progress bar percent here : <span id="percent"></span></p>
<div class="progressbar"></div>
<div class="nav"><button class="prev">Prev</button> | <button class="next">Next</button></div>

Answer 2

您可以.ceil() 或.floor() 十进制数。

var width = $(".progress").width().floor();

这会给你“33”而不是“33.33”

要使数字上升，您可以使用和修改此代码

$({ countNum: $(wNumber).text()}).animate({
    countNum: countTo
    },{
    duration: $scope.duration,
    easing:'swing',
    step: function() {
          $(wNumber).text(Math.floor(this.countNum));
    },
    complete: function() {
        $(wNumber).text(this.countNum);
    }

});

wNumber 可能是指向您想要动画的数字的 jquery 链接