jqurey+Jscex는 게임 강도 막대를 생성합니다.
- 高洛峰원래의
- 2016-12-09 13:34:591283검색
이 글에서는 게임 강도 막대를 생성하기 위한 jqurey+Jscex를 소개합니다. 탁구 게임을 해본 적이 있다면 아래와 같이 강도 막대의 개념에 익숙할 것입니다.
사실 비슷한 규제는 어디에나 있어요! 예를 들어 게임에 들어갈 때 진행률 표시줄, World of Warcraft에서 마법사가 주문을 시전할 때 읽는 표시줄 등...
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
});
}
}
}
}));
이는 100 미만인 가장 바깥쪽의ProcessValues에서 절대 점프하지 않는 것과 동일하므로 끝없이 반복됩니다.
<!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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.