jqurey+Jscex는 게임 강도 막대를 생성합니다.-PHP开发-php.cn

jqurey+Jscex는 게임 강도 막대를 생성합니다.

高洛峰

풀어 주다： 2016-12-09 13:34:59

원래의

1326명이 탐색했습니다.

이 글에서는 게임 강도 막대를 생성하기 위한 jqurey+Jscex를 소개합니다. 탁구 게임을 해본 적이 있다면 아래와 같이 강도 막대의 개념에 익숙할 것입니다.

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>

로그인 후 복사