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

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

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

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

效果如下：

 

Jscex.config.codeGenerator = function (code) { return "false || " + code; } $(function () { $(".progressbar1").progressbar({ value: 37 }); });