av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

JS異步編程四：Jscex+jQ打造游戲力度條

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

成都創(chuàng)新互聯(lián)公司專注于平安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供平安營銷型網(wǎng)站建設(shè)，平安網(wǎng)站制作、平安網(wǎng)頁設(shè)計、平安網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造平安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

其實，類似的條條無處不在！比如進游戲時候的進度條、魔獸世界里法師施法過程中讀的條等等。

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

html：
 

js：

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

加入Jscex讓它動起來：

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

    • 但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應(yīng)該這么實現(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.

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

     
 
 
 
        
  
  
  
    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.

    效果上面一模一樣，不會錯！

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

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

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

    #p#

     
 
 
 
        
  
  
  
    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.

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

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.  
      13.
     
  •  
  •  
  •  
  •  


    • 分享標題：JS異步編程四：Jscex+jQ打造游戲力度條
    當前路徑：http://uogjgqi.cn/article/cosocpo.html
    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊