jqurey+Jscex打造游戏力度条

本文介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-10-20

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实现类似EasyUI的页面布局可改变左右的宽度

截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度) 具体实现代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

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 =

利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

基于jsp+servlet实现的简单博客系统实例(附源码)

本文实例讲述了基于jsp+servlet实现的简单博客系统.分享给大家供大家参考.具体如下: 没有用框架写的 小博客, 代码大量重复. 个人感觉重复代码对于新手还是有好处的,我也是新手,见谅. 完整实例代码点击此处本站下载. 1. servlet /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package Servlet; import blog.

正则表达式 传智播客学习

有了一点点小小成就,五子棋游戏的基本功能已经实现的差不多了,还需要进行部分代码优化,期待明天的到来,因为明天我就可以实现我一个梦想,那就是晚上自己开发的游戏,呵呵!学在其中,乐在其中!下午实在有些腰酸背痛,决定就近去爬山,经过商议决定去百望山森林公园,真的是好久没锻炼了,才两百多米的山爬完回来累的不行,不过也算是感受了一下大自然的风情,站在山顶的感觉真的很不错,看着山下风景,突然感觉自己好渺小,这座城市如此之大,何时何处才是我安身之处?努力,我相信在不远的未来,我相信我的选择.吃过晚饭,看着张孝

传智播客学习之JavaScript基础篇

一.JavaScript与java的区别 1.JavaScript是Netscape公司的产品,Java是Sun公司的产品. 2.JavaScript是基于对象,Java是面向对象. 3.JavaScript只需解释就可以执行,Java需要先编译成字节码文件,再执行. 4.JavaScript是弱类型,Java是强类型. 小结:其实java与JavaScript除了名字上有些像以外,然后JavaScript借用了部分java思想外,其余别的几乎没有什么关系. 二.如何将JavaScript与Ht

传智播客学习之java 反射

此外,毕老师为我们讲解了反射机制,虽然以后我们在开发过程中,不一定会涉及反射,但是反射确实java一种强大的工具,它使我们能够创建灵活的代码,这些代码可以在运行时装配,无需在组件之间进行源代表链接.例如在Tomcat类加载器这种机制被很多框架所使用. 一.什么是反射 反射的概念是由Smith在1982年首次提出,主要是指程序可以访问.检测和修改本身状态行为的一种能力.反射是java程序开发语言的特征之一,它也允许运行中的 Java 程序对自身进行检查,或者说"自审",并能直接操作程序的

传智播客java web 过滤器

根本不利于使用,Servlet应该本是为简化工作而创造的啊!我当时觉得是我的设计框架产生了问题.第二天我便问方老师,确实是使用上有些问题.比如,显示访问计数,我把它单独写成了一个Servlet,什么地方需要它时,便由那个Servlet.include引用计数的Servlet.但这样总会产生一些问题和使用上的不便.比如include的Servlet必须使用相同的流,如果使用forward后任何输出都无效了. 方老师当时建议,把有些功能写到一起.但最后提到了过滤器,那时我便对过滤器产生了兴趣,今日也

揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页

AJAX技术是多种计算机技术的结晶,它的名称来自:Asynchronism(异步).JavaScript.And.XML这4个单词首字母,即异步JavaScript请求处理XML技术.简单的描述就是数据异步传输网页局部刷新的技术.AJAX很流行,WEB程序设计中如果不应用AJAX技术,可以说是不完善的设计.就好象黑白电视机与彩电一样,AJAX就是后者,是一种技术更新的革命! 本人学习AJAX时间并不长,仅10余天,不能说百分之百掌握,但也有所领悟.现在把自己的学习经过和体会写下来,与君共分享.

Spring学习笔记2之表单数据验证、文件上传实例代码

在上篇文章给大家介绍了Spring学习笔记1之IOC详解尽量使用注解以及java代码,接下来本文重点给大家介绍Spring学习笔记2之表单数据验证.文件上传实例代码,具体内容,请参考本文吧! 一.表单数据验证 用户注册时,需要填写账号.密码.邮箱以及手机号,均为必填项,并且需要符合一定的格式.比如账号需要32位以内,邮箱必须符合邮箱格式,手机号必须为11位号码等.可以采用在注册时验证信息,或者专门写一个工具类用来验证:来看下在SpringMVC中如何通过简单的注释实现表单数据验证. 在javax

Android手势密码view学习笔记(二)

我们还是接着我们上一篇博客中的内容往下讲哈,上一节 Android手势密码view笔记(一)我们已经实现了我们的IndicatorView指示器view了: 下面我们来实现下我们的手势密码view: 实现思路: 1.我们照样需要拿到用户需要显示的一些属性(行.列.选中的图片.未选中的图片.错误显示的图片.连接线的宽度跟颜色......). 2.我们需要根据手势的变换然后需要判断当前手指位置是不是在某个点中,在的话就把该点设置为选中状态,然后每移动到两个点(也就是一个线段)就记录该两个点. 3.最