Jquery进度条多色

Jquery progress bar multiple color

本文关键字：Jquery 更新时间：2023-09-26

我正在使用JQuery进度条，想要改变单一的颜色指示进度，使其可变?当你接近100%时，绿色变为浅绿色。

当前空白区域为白色，填充区域为绿色。

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

我想你可以这样做:

jQuery UI:如何改变进度条的颜色?

这也有一个很好的例子

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

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

现在，您应该使用switch语句为预定义的限制之间的值分配颜色(当值在0到25之间时为红色，当值在25到50之间时为橙色等等)，或者使用一些数学方法根据ProgressBar的值动态定义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)";