使用 jquery-circle-progress 插件制作计数器答案

【问题标题】：making a counter with jquery-circle-progress plugin使用 jquery-circle-progress 插件制作计数器
【发布时间】：2017-04-30 23:27:25
【问题描述】：

使用 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>

【问题讨论】：

到目前为止你尝试过什么？向我们展示您的代码。

标签： jquery progress-bar counter

【解决方案1】：

你必须在函数之外获取最大循环进度。

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

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

【讨论】：