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 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
laypage分页控件使用实例详解
May 19 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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
关于crontab的使用详解
2013/06/24 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Django中间件基础用法详解
2019/07/18 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
工程部岗位职责范本
2015/04/11 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
python本地文件服务器实例教程
2021/05/02 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS