Question

使用jquery-circle-progress插件如何创建一个可以计算到一个确定数字的计数器，并且该数字应该从HTML标记中获取。我已经成功但是它无法工作！

<div class="circle" data-value="0.75" data-thickness="04">
   <span>6587</span>
</div>

<script>
    $('.circle').circleProgress({
      fill: {gradient: ['red', 'orange']},
      startAngle: -Math.PI / 2,
      size: 133
    }).on('circle-animation-progress', function(event, progress) {
      var x = parseInt($('.circle span').text());
      $(this).find('span').html(Math.round(x*progress));
  });
</script>

Answer 1

你必须抓住功能之外的最大圆圈进度。

＆＃13;

temp = parseInt($(".circle span").text())
$('.circle').circleProgress({
    fill: {gradient: ['red', 'orange']},
    startAngle: -Math.PI / 2,
    size: 133
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('span').html(parseInt(progress*temp));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<div class="circle" data-value="0.75" data-thickness="04">
   <span>6587</span>
</div>

＆＃13;

用jquery-circle-progress插件制作一个计数器

1 个答案: