日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Jscex+jQueryUI打造游戲力度條

如果大家玩過桌球類游戲的話，對力度條的概念一定不會(huì)陌生，如下圖：

 還有豎直方向上的力度條，如下圖：

 其實(shí)，類似的條條無處不在!比如進(jìn)游戲時(shí)候的進(jìn)度條、魔獸世界里法師施法過程中讀的條等等······

引入jquery ui,我們可以輕松得到下面這個(gè)靜止的力度條：

html：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. /div>
    3.

js：

 
 
 
 
    
  
  
  
  
  1. $(function () { 
    2. 
  
  
  
  
  2. $(".progressbar").progressbar({ 
    3. 
  
  
  
  
  3. value: 37 
    4. 
  
  
  
  
  4. }); 
    5. 
  
  
  
  
  5. });
    6.

效果如下：

加入Jscex讓它動(dòng)起來：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
    3.

    • 效果如下：

    但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應(yīng)該這么實(shí)現(xiàn)：

     
 
 
 
      
  
  
  
  
    1. var executeAsync = eval(Jscex.compile("async", function (proceedValues) { 
      2. 
  
  
  
  
    2. while (true) { 
      3. 
  
  
  
  
    3. while (proceedValues < 100) { 
      4. 
  
  
  
  
    4. proceedValues++; 
      5. 
  
  
  
  
    5. $await(Jscex.Async.sleep(10)); 
      6. 
  
  
  
  
    6. $(".progressbar").progressbar({ 
      7. 
  
  
  
  
    7. value: proceedValues 
      8. 
  
  
  
  
    8. }); 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. if (proceedValues == 100) { 
      11. 
  
  
  
  
    11. while (proceedValues > 0) { 
      12. 
  
  
  
  
    12. proceedValues--; 
      13. 
  
  
  
  
    13. $await(Jscex.Async.sleep(10)); 
      14. 
  
  
  
  
    14. $(".progressbar").progressbar({ 
      15. 
  
  
  
  
    15. value: proceedValues 
      16. 
  
  
  
  
    16. }); 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20. }));
      21.

    效果如下：

    就在這個(gè)時(shí)候，我一不小心，把if (proceedValues == 100) { } 注釋掉了，代碼變成這個(gè)樣子：

     
 
 
 
      
  
  
  
  
    1. var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) { 
      2. 
  
  
  
  
    2. while (true) { 
      3. 
  
  
  
  
    3. while (proceedValues < 100) { 
      4. 
  
  
  
  
    4. proceedValues++; 
      5. 
  
  
  
  
    5. $await(Jscex.Async.sleep(10)); 
      6. 
  
  
  
  
    6. $(".progressbar3").progressbar({ 
      7. 
  
  
  
  
    7. value: proceedValues 
      8. 
  
  
  
  
    8. }); 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. //if (proceedValues == 100) { 
      11. 
  
  
  
  
    11. while (proceedValues > 0) { 
      12. 
  
  
  
  
    12. proceedValues--; 
      13. 
  
  
  
  
    13. $await(Jscex.Async.sleep(10)); 
      14. 
  
  
  
  
    14. $(".progressbar3").progressbar({ 
      15. 
  
  
  
  
    15. value: proceedValues 
      16. 
  
  
  
  
    16. }); 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18. //} 
      19. 
  
  
  
  
    19. } 
      20. 
  
  
  
  
    20. }));
      21.

    我運(yùn)行一下，等著他報(bào)ERROR,結(jié)果奇跡出現(xiàn)了，效果如下，和上面一模一樣，沒有報(bào)錯(cuò)!

    可以看得出來，內(nèi)部的兩個(gè)while不是同時(shí)執(zhí)行的，而是非常線性的，它們之間會(huì)相互等待，而且最開始的執(zhí)行順序是從上至下，內(nèi)部的while執(zhí)行完了，再跳到最外層的while重新執(zhí)行。

    這種設(shè)計(jì)方式，無疑是優(yōu)雅的!!

    上面那種三個(gè)while的方式語意性很好，從剛剛分析得出，代碼還可以這樣寫：

     
 
 
 
      
  
  
  
  
    1. var executeAsync = eval(Jscex.compile("async", function (proceedValues) { 
      2. 
  
  
  
  
    2. while (proceedValues < 100) { 
      3. 
  
  
  
  
    3. proceedValues++; 
      4. 
  
  
  
  
    4. $await(Jscex.Async.sleep(10)); 
      5. 
  
  
  
  
    5. $(".progressbar").progressbar({ 
      6. 
  
  
  
  
    6. value: proceedValues 
      7. 
  
  
  
  
    7. }); 
      8. 
  
  
  
  
    8. if (proceedValues == 100) { 
      9. 
  
  
  
  
    9. while (proceedValues > 0) { 
      10. 
  
  
  
  
    10. proceedValues--; 
      11. 
  
  
  
  
    11. $await(Jscex.Async.sleep(10)); 
      12. 
  
  
  
  
    12. $(".progressbar").progressbar({ 
      13. 
  
  
  
  
    13. value: proceedValues 
      14. 
  
  
  
  
    14. }); 
      15. 
  
  
  
  
    15. } 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18. }));
      19.

    這樣相當(dāng)于永遠(yuǎn)跳不出最外層的proceedValues < 100,所以也會(huì)無限循環(huán)下去。

    ***的Jscex 庫，請上https://github.com/JeffreyZhao/jscex或者h(yuǎn)ttp://www.sndacode.com/projects/jscex/wiki下載吧····

    【更多javascript異步編程系列】

    1. JavaScript異步編程之用Jscex畫圓
    2. 使用Jscex改善JavaScript異步編程體驗(yàn)
    3. JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
    4. Jscex模擬重力場與google蘋果logo的比較

    當(dāng)前文章：Jscex+jQueryUI打造游戲力度條
    分享路徑：http://m.5511xx.com/article/djjhesj.html