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，当我单击下一步时，将变量递增33.33，当单击prev时，将变量减小33.33，并使用html JQuery函数显示它。

您在这里！

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

sinon

(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;
}

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链接

单击将百分比添加到进度栏

2 个答案: