本文介紹了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。