Question

我似乎无法将中心的值（文本）设为100％ - 相反，如果值设置为100%则会显示00%。

以下是我的内容：Demo / fiddle

＆＃13;

$(document).ready(function($) {
  function animateElements() {
    $('.progressbar').each(function() {
      var elementPos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      var percent = $(this).find('.circle').attr('data-percent');
      var percentage = parseInt(percent, 10) / parseInt(100, 10);
      var animate = $(this).data('animate');
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
          startAngle: -Math.PI / 2,
          value: percentage,
          thickness: 14,
          fill: {
            color: '#1B58B8'
          }
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
        }).stop();
      }
    });
  }

  // Show animated elements
  animateElements();
  $(window).scroll(animateElements);
});

＆＃13;

.progressbar {
  display: inline-block;
  width: 100px;
  margin: 25px;
}
.circle {
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center;
}
.circle canvas {
  vertical-align: middle;
}
.circle div {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}
.circle strong i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: normal;
}
.circle span {
  display: block;
  color: #aaa;
  margin-top: 12px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>

<h3>Title (Placeholder)</h3>

<div class="progressbar" data-animate="false">
  <div class="circle" data-percent="100">
    <div></div>
    <p>Testing</p>
  </div>
</div>
<div class="progressbar" data-animate="false">
  <div class="circle" data-percent="30">
    <div></div>
    <p>Testing</p>
  </div>
</div>
<div class="progressbar" data-animate="false">
  <div class="circle" data-percent="77">
    <div></div>
    <p>Testing</p>
  </div>
</div>
<div class="progressbar" data-animate="false">
  <div class="circle" data-percent="49">
    <div></div>
    <p>Testing</p>
  </div>
</div>
<div style="width:100%;height:500px;"></div>

＆＃13;

非常感谢任何帮助。

Answer 1

你的问题就在这一行：

$(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');

永远不会允许百分比字符串超过2个字符。正确的修复将涉及转换值而不是截断前导值。

一个便宜的解决方案是检查价值是＆＃34; 00＆＃34;并将其转换为100，如：

 $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%');
 if(String(stepValue.toFixed(2)).substr(2) == "00"){
     $(this).find('div').text('100%');
 }

<强>更新

感谢SteveMitcham的评论，你也可以用以下代码替换：

$(this).find('div').text((stepValue*100).toFixed(0) + "%");

循环进度条显示滚动 - 百分比文本问题

1 个答案: