2016-12-28 102 views
4

我一直在使用以下jquery循環進度,最近我發現值0.29的問題。它應該顯示29%,而是顯示28%。jquery循環進度顯示不正確的百分比

https://github.com/kottenator/

$(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,然後它工作。

+0

這沒有工作$(this).find('div').text(String(stepValue.toFixed(2))。substr(2)+'%' );但不會工作100%,而不是顯示00% – user1263981

回答

0

這是修復:

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

或者,只是:$(this).find('div').text(Math.round(stepValue * 100) + '%');

演示:

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

測試後,我發現,這個特殊的數字(28, 999999xxxx)被舍入到更小的整數... PS工作正常,更多不同的值,測試幾個...

+0

不適用於0.28,它顯示29% – user1263981

+0

@ user1263981,以及... Math.round應該工作,然後:)請檢查編輯。 – sinisake

+0

這工作正常:),我認爲沒有必要parseFloat – user1263981