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

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

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

引入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()" />

但是通常情况下，我们需要它往返无限循环下去，那么我们应该这么实现：

var executeAsync = eval(Jscex.compile("async", function (proceedValues) {
while (true) {
while (proceedValues < 100) {
proceedValues++;
$await(Jscex.Async.sleep(10));
$(".progressbar").progressbar({
value: proceedValues
});
}
if (proceedValues == 100) {
while (proceedValues > 0) {
proceedValues--;
$await(Jscex.Async.sleep(10));
$(".progressbar").progressbar({
value: proceedValues
});
}
}
}
}));

就在这个时候，我一不小心，把if (proceedValues == 100) { } 注释掉了，代码变成这个样子：

var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) {
while (true) {
while (proceedValues < 100) {
proceedValues++;
$await(Jscex.Async.sleep(10));
$(".progressbar3").progressbar({
value: proceedValues
});
}
//if (proceedValues == 100) {
while (proceedValues > 0) {
proceedValues--;
$await(Jscex.Async.sleep(10));
$(".progressbar3").progressbar({
value: proceedValues
});
}
/