jQuery的进度条，多种颜色

Question

使用JQuery进度条I“m和希望改变单一的颜色表示进度，使之变？绿色到亮绿色，当你接近100％。

Currenly-空空间着色为白色和绿色空间填充有色

$(progressBarID).progressbar({ 
     value: 60 
    }) 
    .children('.ui-progressbar-value') 
    .html("<span>" + completedValue + "</span>") 
    .css({ display: "block", "text-align": "center", "background": progressBarColor }); 

Answer 1

我认为你可以做一些与此类似：

jQuery UI: How to change the color of a ProgressBar?

这也是一个很好的例子。

Answer 2

您可以使用.ui-progressbar-value类访问ProgressBar颜色，并将其背景更改为所需的颜色。

您可以使用$('#progressbar').progressbar("value");获取ProgressBar的值，#progressbar是您的ProgressBar元素ID。

现在您应该使用switch语句为预定义的限制（值介于0和25之间时为红色，介于25和50之间时为橙色等等）之间的值分配颜色，或者使用某些数学运算来动态定义RGB值取决于ProgressBar的值。

下面是基于该进度值定义颜色的代码为例：

var red = Math.ceil(255 - 255*value/100)*3; 
if(red/255 >= 1) { 
    red = 255; 
} 

var green = Math.ceil(255*value/100)*2; 
if(green/255 >= 1) { 
    green = 255; 
} 

var rgb = "rgb(" + red + ", " + green + ", 30)";