jqurey+Jscex erstellt einen Spielintensitätsbalken
- 高洛峰Original
- 2016-12-09 13:34:591330Durchsuche
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:
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>
js:
$(function () {
$(".progressbar").progressbar({
value: 37
});
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()" />
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
});
}
}
}
}));
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
});
}
//}
}
}));
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
});
}
}
}
}));
Dies ist gleichbedeutend damit, dass man niemals aus den äußersten Proceedings-Werten
<!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>