jqurey+Jscex creates game intensity bar-PHP开发-php.cn

jqurey+Jscex creates game intensity bar

高洛峰

Release： 2016-12-09 13:34:59

Original

1320 people have browsed it

This article introduces jqurey+Jscex to create game intensity bars. If you have played pool games, you will be familiar with the concept of intensity bars, as shown below:

jqurey+Jscex creates game intensity bar

In fact, similar bars are everywhere! For example, the progress bar when entering the game, the bar read when the mage in World of Warcraft casts a spell, etc...

Introducing jquery ui, we can easily get the following static strength bar:

html:

<div class="progressbar" style="width: 20%"></div>

Copy after login

js:

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

Copy after login

Join Jscex to make it move:

<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()" />

Copy after login

But usually, we need it to loop back and forth infinitely, then we should implement it like this:

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
 
     });
 
    }
 
   }
 
  }
 
 }));

Copy after login

At this moment, I accidentally commented out if (proceedValues == 100) { }, and the code became like this:

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
    });
   }
   //}
  }
 }));

Copy after login

The effect is exactly the same as above, it can’t be wrong!

It can be seen that the two internal whiles are not executed at the same time, but very linearly. They will wait for each other, and the initial execution order is from top to bottom. After the internal while is executed, jump again Go to the outermost while and re-execute.

This design method is undoubtedly elegant! !

The semantics of the three while methods above are very good. From the analysis just made, the code can also be written like this:

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
 
     });
 
    }
 
   }
 
  }
}));

Copy after login

This is equivalent to never jumping out of the outermost proceedValues < 100, So it will continue in an infinite loop.

<!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>

Copy after login