<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery之进度条</title>

<!--加载google的jquer库y-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var i = 0;//进度百分值

//为id="btn"的元素（Start按钮）添加click事件，点击后进度条开始增长
$("#btn").click(function(){

//为id="val"的元素（进度条div）添加动画，在3000毫秒内进度条宽度从0px增长到300px
$("#val").animate({width:'300px'},3000);
$(this).attr("disabled",true);//禁用Start按钮
$("#btnp").attr("disabled",false);//启用Pause按钮
setPercent();//调用setPercent()函数，后面的百分数开始计数
});

//百分数计数函数
function setPercent()
{
//进度条未满的时候
if(i <= 100)
{
$("#percent").html(i+"%");//设置进度百分数的值
i = i + 1;//将进度百分值+1
st = setTimeout(setPercent,3);//每3毫秒执行一次本函数，相当于进度条每3毫秒增加1%
}

//进度条满的时候
else
{
clearTimeout(st);//进度百分数停止增加
$("#btnc").attr("disabled",false);//启用Clear按钮
$("#btnp").attr("disabled",true);//禁用Pause按钮
}
}

//为id="btnc"的元素（Clear按钮）添加click事件，点击后回到初始状态
$("#btnc").click(function(){
i = 0;//进度百分值置零
$("#val").css("width","0px");//进度条置零
$("#percent").html("0%");//进度百分值置零
$("#btnp").val("Pause");//Pause按钮value设置成"Pause"
$("#btn").attr("disabled",false);//启用Start按钮
$("#btnp").attr("disabled",true);//禁用Pause按钮
$("#btnc").attr("disabled",true);//禁用Clear按钮
});

//为id="btnp"的元素（Pause按钮）添加click事件，点击后进度条被暂停或继续
$("#btnp").click(function(){
//如果按钮值为Pause，表示按下之后暂停进度
if("Pause" == $("#btnp").val())
{
$("#val").stop();//停止进度条动画
clearTimeout(st);//停止百分值增长
$("#btnp").val("Go on");//将按钮值设置为Go on
$("#btnc").attr("disabled",false);//启用Clear按钮
}

//如果按钮值为Go on，表示按下之后继续进度
else
{
i = parseInt(delEnd($("#percent").html()));//获取暂停时的百分值字符串，去掉分号，并转为整数
var temp = 30 * (100 - i);//计算动画剩余时间
$("#val").animate({width:'300px'}, temp);//继续动画
setPercent();//百分值继续增长
$("#btnp").val("Pause");//将按钮值设置成"Pause"
$("#btnc").attr("disabled",true);//禁用Clear按钮
}
});

//去除百分值字符串里面的分号的函数
function delEnd(str)
{
var temp="";
for(var i=0; i < str.length-1; i++)
{
temp=temp+str[i];
}
return temp;
}
});
</script>
</head>

<body>
<div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;">
<div id="val" style="height:100%; background-color:#03F; width:0px;"></div>
</div>
<div id="percent" style="float:left; line-height:30px;">0%</div>
<div style="clear:both"></div>
<br />
<input id="btn" type="button" value="Start" />
<br />
<input id="btnc" type="button" value="Clear" disabled />
<br />
<input id="btnp" type="button" value="Pause" disabled />
</body>
</html>

jq进度条的更多相关文章

  1. jq 进度条插件

    /***进度条*/var ProgressScrollBar = function (model) { this.defaults = { isCanMove: true,//是否启用拖动 conta ...

  2. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  3. JQ加载进度条动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  5. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  6. easyui源码翻译1.32---ProgressBar（进度条）

    前言 使用$.fn.progressbar.defaults重写默认值对象.下载该插件翻译源码 进度条提供了一个反馈显示一个长时间运行的操作进展.可以更新的进展条,让用户知道当前正在执行操作. 源码 ...

  7. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  8. Unity 进度条3D制作(3D版)

    昨天我们一起学习了2D进度跳的制作,那么趁着我们脑海中还残存昨日的记忆,今天继续学习另一种方法: 实现思路:当鼠标悬浮Start按钮->实例化物体并显示进度->100/100->进入 ...

  9. Android UI（四）云通讯录项目之云端更新进度条实现

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

随机推荐

  1. SpringBoot项目以服务器方式启动

    SpringBoot项目,如果未引入Web相关依赖,不会以服务器方式进行启动,会以应用的方式启动并结束 <dependency> <groupId>org.springfram ...

  2. 查询及删除重复记录的SQL语句

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select * from people where peopleId in (select peopleId from ...

  3. PCB Web版SI9000阻抗计算器

    在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法  ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现.   一.Web版SI9000阻抗计算器 ...

  4. python的安装教学

    1.首先登陆到python的官方网站 https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3. ...

  5. POJ 2255 Tree Recoveryw(二叉树)

    题目原网址:http://poj.org/problem?id=2255 题目中文翻译: Description 小瓦伦丁非常喜欢玩二叉树. 她最喜欢的游戏是用大写字母构造的随机二叉树. 这是她的一个 ...

  6. Python上下文管理器(Context managers)

    上下文管理器(Context managers) 上下文管理器允许你在有需要的时候,精确地分配和释放资源. 使用上下文管理器最广泛的案例就是with语句了.想象下你有两个需要结对执行的相关操作,然后还 ...

  7. Errors running builder 'JavaScript Validator'错误处理

    MyEclipse2014编辑代码时,只要保存就会报出如下错误信息: Errors occurred during the build. Errors running builder 'JavaScr ...

  8. jacaScript数组

    1.var arr=['1','2','3'] typeof arr (判断数组类型)    print(arr)打印数组内容 2.arr[100]='x',  数组中间自动添加,alert(arr. ...

  9. 解决okHttp使用https抛出stream was reset: PROTOCOL_ERROR的问题

    昨天在做Android接口调用的时候,api接口是https的,用okhttp抛出: okhttp3.internal.http2.StreamResetException: stream was r ...

  10. struts 2.5 There is no Action mapped for namespace [/] and action name [user_find] associated with context path [/struts2_crm].

    遇到了这个错误. There is no Action mapped for namespace [/] and action name [user_find] associated with con ...