EasyUi 进度条组件ProgressBar 根据实时进度更改进度条颜色。>=30%为绿,>=70为黄,>70%为红,可以应用率监控系统CPU、内存使用绿,通过进度及颜色表示当前系统资源使用率。
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="start()">Start</a>
</div>
<div id="p" class="easyui-progressbar" style="width:400px;height:15px"></div>
<script>
function start(){
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 2);
$('#p').progressbar('setValue', value);
if(value<=30){
$(".progressbar-value .progressbar-text").css("background-color","#53CA22");
}else if (value<=70){
$(".progressbar-value .progressbar-text").css("background-color","#EABA0A");
}else if (value>70){
$(".progressbar-value .progressbar-text").css("background-color","#DF4134");
}
setTimeout(arguments.callee, 200);
}
};
</script>