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