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 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
Postman参数化实现过程及原理解析
Aug 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
隐藏你的.php文件的实现方法
2007/03/19 PHP
php中strtotime函数用法详解
2014/11/15 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
sina的lightbox效果。
2007/01/09 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python continue语句用法实例
2014/03/11 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python groupby 函数 as_index详解
2019/12/16 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
学校消防演习方案
2014/02/19 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
农村文化活动总结
2014/08/28 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python