我一直在使用以下的jQuery环形进度条,最近发现了一个问题。当值为0.29时,应该显示29%,但实际上显示的是28%。
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,则它可以正常工作。