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 keycode总结
Feb 04 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
AngularJS手动表单验证
Feb 01 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
基于百度地图实现产品销售的单位位置查看功能设计与实现
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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jQuery find和children方法使用
2011/01/31 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python中随机函数random用法实例
2015/04/30 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python队列Queue的详解
2019/05/10 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
实例详解Python装饰器与闭包
2019/07/29 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
股份转让协议书
2014/04/12 职场文书
商场父亲节活动方案
2014/08/27 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014年秘书工作总结
2014/11/25 职场文书
碧霞祠导游词
2015/02/09 职场文书
返乡农民工证明
2015/06/24 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
win7配置本地ftp服务器的图文教程
2022/08/05 Servers