jquery进度条多色答案

【问题标题】：Jquery progress bar multiple colorjquery进度条多色
【发布时间】：2016-10-12 13:24:07
【问题描述】：

我正在使用 JQuery Progress-Bar 并想更改指示进度的单一颜色以使其可变？当您接近 100% 时将绿色变为较浅的绿色。

当前 - 空白空间用白色着色，填充空间用绿色着色。

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

我认为你可以做类似的事情：

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

这也有一个很好的例子。

【讨论】：

【解决方案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)";

【讨论】：