Javascript 如何用不同颜色的html显示进度条
我希望进度条应该有三种不同的颜色，比如说从o到40是蓝色40到80是红色，从80到100是绿色。我已经搜索了很多，但我只得到了简单的移动条。 有没有办法做到这一点 我使用下面的代码，我得到的，但它也不移动Javascript 如何用不同颜色的html显示进度条,javascript,jquery,html,jquery-ui,progress-bar,Javascript,Jquery,Html,Jquery Ui,Progress Bar,我希望进度条应该有三种不同的颜色，比如说从o到40是蓝色40到80是红色，从80到100是绿色。我已经搜索了很多，但我只得到了简单的移动条。 有没有办法做到这一点 我使用下面的代码，我得到的，但它也不移动 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Progressbar - Default fun
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
jQuery UI Progressbar-默认功能
$（函数（）{
$（“#progressbar”）.progressbar({
价值：37
});
});
检查它。尝试将此Css代码应用于您的#progressbar
#progressbar{
width:300px;height:14px;
background-color:#00aeff;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#00aeff, endColorstr=#ff0000);
background-image:-moz-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-webkit-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-o-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-ms-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(40%,#00aeff), color-stop(80%,#ff0000),color-stop(100%,#2fff00));}
听起来你想把变更事件挂接在一起，检查进度在哪里，然后从中重新设置条。看看它，你会想到两种不同的方法（如果你不想使用chermanarun提到的CSS3梯度，那么：
它有不同的颜色，但我想要三种不同的颜色在一个条形图中。你应该尝试使用这个链接：@secretlm在这里使所有的背景都变成绿色。我想要分段，如果它的首字母是红色，然后是红色和绿色，就像这个
#progressbar.ui progressbar值{background:blue url（path/to/your/image.png）无重复左上；}