jqurey+Jscex打造游戏力度条
本文介绍了jqurey+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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Jqurey实现类似EasyUI的页面布局可改变左右的宽度
截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度) 具体实现代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
-
c#+JQurey实现获取radio和checkbox的值
废话不多说,直接上代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Web2.aspx.cs" Inherits="Chapter2.Web2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
jqurey+Jscex打造游戏力度条
本文介绍了jqurey+Jscex打造游戏力度条,如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图: 其实,类似的条条无处不在!比如进游戏时候的进度条.魔兽世界里法师施法过程中读的条等等······ 引入jquery ui,我们可以轻松得到下面这个静止的力度条: html: <div class="progressbar" style="width: 20%"></div> js: $(function () { $("
-
jqurey 学习笔记 传智博客佟老师附详细注释
1 .写 js 的时候用 aptana ( IDE ),有 jquery 的代码提示. 把 code assist 里面的 jqurey1.3 选上就可以了. 2 .为一个元素增加事件的时候不要在 html 里加,在 js 中加. 不要写 <input type="button" onclick="xxx" id="id"> 要写成: document.getElementById("id").onclick =
-
jquery+Jscex打造游戏力度条
本文介绍了jquery+Jscex打造游戏力度条,如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图: 其实,类似的条条无处不在!比如进游戏时候的进度条.魔兽世界里法师施法过程中读的条等等······ 引入jquery ui,我们可以轻松得到下面这个静止的力度条: html: <div class="progressbar" style="width: 20%"></div> js: $(function () { $("
-
使用Bootstrap打造特色进度条效果
Bootstrap基本进度条实现 1.外层容器使用class=progress类样式 2.真正显示进度条样式的容器使用class=progress-bar类样式 示例: <div class="progress"> <div class="progress-bar"></div> <!--可以添加width来设置进度条当前加载的百分比--> <div class="progress-bar"
-
JS实现点星星消除小游戏
本文实例为大家分享了JS实现点星星消除游戏的具体代码,供大家参考,具体内容如下 步骤及游戏功能分析: 1.网页上的随机出现小星星: 2.点击小星星,小星星消失: 绑定一个onclick事件: 对象.事件 = 事件处理函数: 注意:要想删除某个节点,必须找到它的父节点 注意:在绑定事件中this可以直接使用 3.添加功能开始游戏 4.添加功能暂停游戏 5.游戏进度条功能 <style type="text/css"> #d2{ width: 100px
-
Python+Pygame实战之吃豆豆游戏的实现
目录 导语 一.首先 二.正式开始 三.效果展示 导语 昨晚玩起了小时候玩的游戏“吃豆豆”,但是我发现,一局游戏三条命,我根本不能吃完所有的豆豆,总是被敌人吃掉 于是,我在想怎么能够保证我达到吃完所有豆豆的目标,然后我就想到了一个办法: 自己找资料找素材学习仿写了一款吃豆豆的小游戏,然后给我自己无限开挂! 哈哈哈!这不?完全解决了我的问题,完美的躺赢了!聪明的我.jpg 一.首先 1)素材 首先找到吃豆豆游戏的界面按照上面的素材找找准备下相似的图片!如下: 2)环境 本文的环境都跟之前的
-
基于Python实现英语单词小游戏
目录 导语 一.敲代码之前的小tips 二.运行环境 三.素材(图片等) 四.代码展示 1)主程序(英文打字小游戏主入口模块) 2)游戏配置信息模块 3)游戏视图模块 4)PyGame游戏精灵模块 五.效果展示 1)游戏界面 2)游戏设置 3)随机截图 4)游戏结束 导语 相信大家对于英语四级一点都不陌生了吧? 很多学校都是要求学生必须考过英语四级,不然就不能毕业. 一开始我抱着侥幸心理,心想上高中的时候英语不错,四级应该也很容易.不过成绩出来我就傻眼了,没有通过.然后我就制定了周密的学习计划
-
邮箱及IE安全技巧全精通
"假痴不癫"意为凡有作为的人,一般都腹有良谋,筹划于暗中,不露声色而后发制人.在E-mail的安全防范中,我们同样可以使用"假痴不癫"之计谋,从系统.杀毒.防黑等多方面为E-mail打造出一条安全防线-- E-mail的安全隐患浅析 E-mail作为目前网络中人际交往中使用最广泛的通信工具,它的安全问题在数年前就引起了各方面的关注.简单地说,E-mail在安全方面的问题主要有以下直接或间接的几方面: ●密码被窃取 木马.暴力猜解.软件漏洞.嗅探等诸多方式均有可能让邮
-
详解MFC/C++调用易语言的整数型和文本型与VS2010互动
1.LoadDll.cpp #include "StdAfx.h" #include "LoadDLL.h" pMFCdll_OneVOID_OneVOID MFCdll_OneVOID_OneVOID; pMFCdll_OneWORD_OneVOID MFCdll_OneWORD_OneVOID; pMFCdll_OneCHAR_OneVOID MFCdll_OneCHAR_OneVOID; pMFCdll_OneWORD_OneWORD MFCdll_OneWO
-
ajax+php打造进度条 readyState各状态
用Ajax+php打造进度条,其实很简单. readyState == 状态(0,1,2,3,4) 0:请求未初始化,还没调用open 1:请求已经建立,但还没有发送,还没调用send 2:请求已发送,并且正在处理 3:请求正在处理,通常响应中已有部分数据可调用 4:完毕 复制代码 代码如下: var xmlHttp; function create() if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHT
-
使用python制作游戏下载进度条的代码（程序说明见注释）
import time # time模块中包含了许多与时间相关的模块,其中通过time()函数可以获取当前的时间. count = 100 print("开始下载".center(100, '-')) start = time.perf_counter() # 通过time()函数可以获取当前的时间并付给变量start for i in range(count + 1): a = "■" * i # 用■的个数来具体化已经下载完的进度.■在输入法里的特殊符号里. b