jquery+Jscex打造游戏力度条
更新时间：2020年09月12日 14:22:21 作者：当耐特砖家
游戏力度条大家一定不陌生，在很多游戏中都能用到，本文介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在网站前端开发中，浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下，希望对大家有所帮助2014-09-09
在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果，非常漂亮，实用性也非常高，今天小编给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果，感兴趣的朋友一起学习吧2016-05-05
这篇文章主要为大家详细介绍了jquery实现弹窗系统提示框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
将一个表单序列化为一个对象的方法有很多，感兴趣的朋友可以了解下本文所介绍的这个，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jquery实现的3D旋转木马特效，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了js/jquery判断图片是否存在的函数代码,需要的朋友可以参考下2023-06-06
jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验2011-10-10
这篇文章主要介绍了php结合imgareaselect实现图片裁剪的相关资料,需要的朋友可以参考下2015-07-07
本章内容比较简单，所以说明也比较少，有疑问也以跟帖或私聊2009-07-07
本文简单说明php用json如何跨域调用，一个小例子，大家看一下就明白2013-11-11
最新评论