DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jqurey+Jscex打造游戲力度條
jqurey+Jscex打造游戲力度條
編輯:JQuery入門技巧      日期:2016/12/24 14:41:48

本文介紹了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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved