jqurey+Jscex打造游戏力度条

本文介绍了jqurey+Jscex打造游戏力度条，如果大家玩过桌球类游戏的话，对力度条的概念一定不会陌生，如下图：

其实，类似的条条无处不在！比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······
引入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 }）;}//} }}））;

效果上面一模一样，不会错！
可以看得出来，内部的两个while不是同时执行的，而是非常线性的，它们之间会相互等待，而且最开始的执行顺序是从上至下，内部的while执行完了，再跳到最外层的while重新执行。
这种设计方式，无疑是优雅的！！
上面那种三个while的方式语意性很好，从刚刚分析得出，代码还可以这样写：

var executeAsync = eval（Jscex.compile（"async", function （proceedValues） {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 }）;} }}}））;

这样相当于永远跳不出最外层的proceedValues < 100,所以也会无限循环下去。

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> </head><body><script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script><script> $（function （） {$（"#progressbar3"）.progressbar（{ value: 37}）; }）; </script> <div class="demo"><div id="progressbar3" style="width:200px"></div></div><！-- End demo --><script> var executeAsync21 = eval（Jscex.compile（"async", function （proceedValues） {while （true） { while （proceedValues < 100） {proceedValues++;$await（Jscex.Async.sleep（100））;$（"#progressbar3"）.progressbar（{ value: proceedValues}）; } //if （proceedValues == 100） { while （proceedValues > 0） {proceedValues--;$await（Jscex.Async.sleep（100））;$（"#progressbar3"）.progressbar（{ value: proceedValues}）; } //}} }））; executeAsync21（38）.start（）; </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。