Question

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

的代码片段

<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

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

＆＃13;

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

＆＃13;

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

＆＃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/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>

＆＃13;

我们所做的是，如果该值大于100，我们添加另一个同时运行的圆，是不可见的，只有100.这使我们知道第一个圆何时达到100％。然后当达到100时，我们为剩余值添加第三个更薄的一个。

这样：

我们保持百分比计数从0到120％
我们有＆＃34;额外＆＃34;当百分比超过100％

是

Answer 3

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

    var value =  (120/120)*100;

其他

    var value = (120/out_of_value)*100;

Jquery Circle进度条值超过100％

3 个答案: