jqurey+Jscex erstellt einen Spielintensitätsbalken-PHP开发-php.cn

jqurey+Jscex erstellt einen Spielintensitätsbalken

高洛峰

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

Original

1327 Leute haben es durchsucht

In diesem Artikel wird jqurey+Jscex zum Erstellen eines Spielintensitätsbalkens vorgestellt. Wenn Sie Tischtennisspiele gespielt haben, sind Sie mit dem Konzept des Intensitätsbalkens vertraut, wie unten gezeigt:

jqurey+Jscex erstellt einen Spielintensitätsbalken

Eigentlich gibt es überall ähnliche Regelungen! Zum Beispiel der Fortschrittsbalken beim Betreten des Spiels, der Balken, der angezeigt wird, wenn der Magier in World of Warcraft einen Zauber wirkt, usw.

Durch die Einführung von jquery ui können wir ganz einfach den folgenden statischen Stärkebalken erhalten:

html:

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

Nach dem Login kopieren

js:

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

Nach dem Login kopieren

Join Jscex macht es in Bewegung:

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

Nach dem Login kopieren

Aber normalerweise brauchen wir eine endlose Schleife hin und her, dann sollten wir es so implementieren:

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

Nach dem Login kopieren

In diesem Moment habe ich versehentlich if (proceedValues == 100) { } auskommentiert und der Code sah so aus:

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

Nach dem Login kopieren

Der Effekt ist genau derselbe, da kann man nichts falsch machen!

Es ist ersichtlich, dass die beiden internen Whiles nicht gleichzeitig ausgeführt werden, sondern sehr linear. Sie warten aufeinander und die anfängliche Ausführungsreihenfolge ist von oben nach unten und die interne While-Ausführung Wenn es fertig ist, springen Sie zum äußersten while und führen Sie es erneut aus.

Diese Designmethode ist zweifellos elegant! !

Die oben genannten drei While-Methoden haben eine sehr gute Semantik. Aus der gerade durchgeführten Analyse kann der Code auch so geschrieben werden:

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

Nach dem Login kopieren

Dies ist gleichbedeutend damit, dass man niemals aus den äußersten Proceedings-Werten < 100 herausspringt, sodass es zu einer Endlosschleife kommt.

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

Nach dem Login kopieren