Question

我正在使用JQuery Progress-Bar并希望更改指示进度的单一颜色以使其变量？当接近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的值。

以下是基于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)";

Jquery进度条多种颜色

2 个答案: