Jquery循环进度条值大于100%

我正在开发一个jQuery circle进度条，其中引用了Circlefuljs（）。在这个插件中一切正常，但在某些情况下，我的百分比达到100%以上。如果百分比值为120%，则圆圈100%完全填充，并且在接下来的20%中，它似乎与相同的颜色重叠。在这种情况下，从最终用户的角度来看，他们看不到变化，这似乎令人困惑。所以我需要一些变化来表明，在一些不同颜色的额外20%是一些其他的东西。这是我试用过的代码片段

var值=120
$（文档）.ready（函数（）{
$（“#测试圆”）({
动画步骤：5，
前地面边界宽度：15，
背景边框宽度：15，
百分比：价值，
});
});

---

我不知道我的问题是否正确，但我面临着这种情况。有没有任何可能的方法来做到这一点，使额外的20%显示与一些颜色的细线？如果有什么事，请向我建议。这将对我很有帮助。提前谢谢

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

    var value =  (120/120)*100;

否则

---

你给出的值实际上是一个硬值，如果你想显示百分比，你应该将它除以一些值，比如如果120等于120，那么它应该

    var value =  (120/120)*100;

否则

---

您好，请查看此解决方案： （我已经修改了@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>

---

您好，请查看此解决方案： （我已经修改了@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>

---

有时候事情不像你想象的那么整洁

var值=120
$（文档）.ready（函数（）{
$（“#测试圆”）({
动画步骤：5，
前地面边界宽度：15，
背景边框宽度：15，
百分比：价值，
});
如果（值>100）{
var额外=值-100；
$（“#测试循环时间”）。循环({
动画步骤：5，
foregroundBorderWidth:0，
背景边框宽度：0，
百分之一百，
percentageTextSize:0
}，函数（）{
$（“#测试圆额外”）.圆形({
动画步骤：5，
前地面边界宽度：8，
背景边框宽度：8，
百分比：额外，
背景颜色：“无”，
前底色：“#a33”，
percentageTextSize:0
});
});
}
});
#圆形容器{
职位：亲属；
}
#圆形容器>div{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
}
有时候事情不像你想象的那么整洁


var值=120
$（文档）.ready（函数（）{
$（“#测试圆”）({
动画步骤：5，
前地面边界宽度：15，
背景边框宽度：15，
百分比：价值，
});
如果（值>100）{
var额外=值-100；
$（“#测试循环时间”）。循环({
动画步骤：5，
foregroundBorderWidth:0，
背景边框宽度：0，
百分之一百，
percentageTextSize:0
}，函数（）{
$（“#测试圆额外”）.圆形({
动画步骤：5，
前地面边界宽度：8，
背景边框宽度：8，
百分比：额外，
背景颜色：“无”，
前底色：“#a33”，
percentageTextSize:0
});
});
}
});
#圆形容器{
职位：亲属；
}
#圆形容器>div{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
}

以您设置的120%为单位。如果你需要100%，那么只将值设为100你见过120%的馅饼吗？这就像一个古老的俄罗斯笑话，关于伏特加中酒精含量的百分比：））一个解决办法是将圆圈变成一个酒吧或使用两个圆圈。简言之，百分比值应该小于100。一个想法是，百分比设置为120。如果你需要100%，那么只将值设为100你见过120%的馅饼吗？这就像一个关于伏特加中酒精含量%的俄罗斯老笑话：））解决方法是将圆圈改成一个条形或使用两个圆圈。简言之，百分比值应该小于100。这个值不是硬值，和我使用的公式相同，考虑一下我今天销售30台手机的例子（在这种情况下，30个单位是目标100%），但是我已经卖出了35台手机，在这种情况下，你的公式（35/30）*100’给了116.6点东西，所以我的目标比我设定的目标要多。对于这种情况，我只问变量，所以在这种情况下，你不应该在百分比上显示值，因为它将超过100%。这个值不是硬值，我使用的公式相同，考虑我今天销售30台手机的例子（在这种情况下，30个单位是目标100%）。但我已经售出了35部手机，在这种情况下，根据你的公式（35/30）*100），这给了116.6，所以我的目标比我设定的目标要高。对于这种情况，我只询问变量。在这种情况下，您不应该以百分比表示值，因为它将超过100%。非常感谢非常简洁的解释非常感谢非常简洁的解释