jquery+Jscex打造游戏力度条


Posted in Javascript onSeptember 12, 2020

本文介绍了jquery+Jscex打造游戏力度条,如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图:

jquery+Jscex打造游戏力度条

其实,类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······

引入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

   });

  }

  }

 }
}));

这样相当于永远跳不出最外层的proceedValues < 100,所以也会无限循环下去。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
网页瀑布流布局jQuery实现代码
Oct 21 #Javascript
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php中的数组操作函数整理
2008/08/18 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
js实现录音上传功能
2019/11/22 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
python中管道用法入门实例
2015/06/04 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
机关会计岗位职责
2014/04/08 职场文书
青年志愿者活动总结
2014/04/26 职场文书
廉政承诺书
2015/01/19 职场文书
奖学金感谢信
2015/01/21 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers