Jscex+jQuery UI打造游戏力度条

如果大家玩过桌球类游戏的话，对力度条的概念一定不会陌生，如下图：

还有竖直方向上的力度条，如下图：

其实，类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······

引入jquery ui,我们可以轻松得到下面这个静止的力度条：

html：

<div class="progressbar" style=" width: 20%"> 
/div> 

js：

$(function () {  
$(".progressbar").progressbar({  
value: 37  
});  
}); 

效果如下：

加入Jscex让它动起来：

 <script type="text/javascript"> 
$(function () {  
$(".progressbar").progressbar({  
value: 5  
});  
});  
var executeAsync = eval(Jscex.compile("async", function (proceedValues) {  
while (proceedValues < 100) {  
proceedValues++;  
$await(Jscex.Async.sleep(50));  
$(".progressbar").progressbar({  
value: proceedValues  
});  
}  
}));  
function btnExecuteAsync_onclick() {  
executeAsync(5).start();  
}  
</script> 
<div class="progressbar" style=" width: 20%"> 
</div> 
<input id="btnExecuteAsync" type="button" value="开始" onclick="return btnExecuteAsync_onclick()" /> 

效果如下：