Jquery Circle进度条值超过100%

Question

我正在参考 Circlefuljs (https://github.com/pguso/jquery-plugin-circliful) 开发一个 jQuery 圆形进度条。这个插件一切正常，但在某些情况下，我的百分比达到了 100% 以上。如果百分比值为 120%，则圆圈在其 100% 处被完全填充，并且对于接下来的 20%，它似乎与相同的颜色重叠。在这种情况下，从最终用户的角度来看，他们看不到变化，这似乎令人困惑。所以我需要一些变化来表明一些不同颜色的额外 20% 是一些其他的东西。这是我用https://jsfiddle.net/heh12u5v/7/尝试过的sn-p

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
    <div id="test-circle"></div>
</div>

var value = 120
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
  });
});

我不知道我的问题是否正确，但我面临这种情况。有没有办法做到这一点，让额外的 20% 显示为带有某种颜色的细线？如果有任何事情，请向我提出建议。这对我很有帮助。提前致谢。

Answer 1

您好，请查看此解决方案：JSFiddle （我修改了@madalin ivascu jsfiddle）。可能你想要一些像下面这样的想法。

Javascript：

var value = 120; // here your dynamic value
var extravalue=0;
if(value>100)
{
    extravalue=value-100;
  value=100;
}

$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value
  },function(){
    if(extravalue!=0)
    {
       $("#test-circle2").circliful({
            animationStep: 5,
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
            backgroundColor:"none",
            foregroundColor: '#009900',
            percent: extravalue
        },function(){
            alert("completed");
        });    
    }
  });
});

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
    <div id="test-circle"></div>
  <div id="test-circle2"></div>
</div>

Answer 2

有时候事情并没有你想象的那么整齐..

var value = 120
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
  });
  
  if(value > 100){
    var extra = value - 100;
    $("#test-circle-time").circliful({
      animationStep: 5,
      foregroundBorderWidth: 0,
      backgroundBorderWidth: 0,
      percent: 100,
      percentageTextSize:0
    },function(){
    	$("#test-circle-extra").circliful({
        animationStep: 5,
        foregroundBorderWidth: 8,
        backgroundBorderWidth: 8,
        percent: extra,
        backgroundColor: "none",
        foregroundColor:'#a33',
        percentageTextSize:0
      });
    });
  }
});

#circle-container{
  postition:relative;
}
#circle-container > div{
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div id="circle-container">
  <div id="test-circle"></div>
  <div id="test-circle-time"></div>
  <div id="test-circle-extra"></div>
</div>

我们所做的是，如果该值大于 100，我们添加另一个同时运行的圈子，它是不可见的，并且只达到 100。这让我们知道第一个圈子何时达到 100%。然后当达到 100 时，我们为剩余值添加第三个更薄的。

这样：

1. 我们将百分比从 0 平稳地计算到 120%
2. 当百分比超过 100% 时，我们有一个“额外”开始

是的。

Answer 3

你给出的值实际上是一个硬值，如果你想显示百分比而不是你应该将它除以某个值值，比如如果 120 超过 120，那么它应该像

    var value =  (120/120)*100;

否则

    var value = (120/out_of_value)*100;