jqurey+Jscex打造游戏力度条

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

其实，类似的条条无处不在！比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等・・・・・・

引入jquery ui,我们可以轻松得到下面这个静止的力度条：

html：

js：

 $(function () {
   $(".progressbar").progressbar({
    value: 37
   });

加入Jscex让它动起来：

但是通常情况下，我们需要它往返无限循环下去，那么我们应该这么实现：

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,所以也会无限循环下去。

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