Question

我一直在使用以下jquery圈子进度，最近我注意到值为0.29的问题。它应显示29％，但显示28％。

$(document).ready(function($) {
 $('.progressbar').each(function () {
    var elementPos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    var percent = $('input[id$=hdProfitPerc]').val();  //$(this).find('.circle').attr('data-percent');
    var percentage = parseInt(percent, 10) / parseInt(100, 10);
    var animate = $(this).data('animate');
    var Profit = $('input[id$=hdProfit]').val();
    //alert($('input[id$=hdProfitPerc]').val());

    var clr

    if (percent < 0) {
        clr = 'red'
    }
    else {
        clr = 'green'
    }

    if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.small-circle').circleProgress({
            startAngle: -Math.PI / 2,
            value: 0.29, //percentage,
            thickness: 8,
            fill: {
                color: clr
            }
        }).on('circle-animation-progress', function (event, progress, stepValue) {
            //$(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
            $(this).find('div').text(parseInt(stepValue * 100) + '%');
        }).stop()
         .on('circle-animation-end', function (event) {
             $(this).find('#GP').html(Profit);
         })
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script>
<div id="div_progressbar" runat="server">
  <div class="progressbar" style="padding-left: 80px;">
    <div class="small-circle">
      <div></div>
      <span id="GP" style="color: black"></span>
    </div>
  </div>
</div>

如果我将值从0.29更改为0.291则可行。

Answer 1

这是修复：

   $(this).find('div').text(Math.round(parseFloat(stepValue * 100)) + '%');

或者，只需：$(this).find('div').text(Math.round(stepValue * 100) + '%');

演示：

https://jsfiddle.net/tq4jok5r/2/

经过测试，我注意到这个特定的数字（28,999999xxxx）四舍五入到较小的整数... P.S。适用于更多不同的价值，测试很少......

jquery圈进度显示不正确的百分比

1 个答案: