<!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. bzoj3090

    树形dp 有一个比较明显的dp状态是dp[i][j]表示当前i节点的子树已经满足且i剩下j元钱的最小操作次数,这样复杂度比较高状态数已经有O(n*x)的了,转移再来x,肯定不行. 我们考虑把状态和dp ...

  2. MultipartResolver实现文件上传功能

    转自:https://www.jb51.net/article/142736.htm springMVC默认的解析器里面是没有加入对文件上传的解析的,,使用springmvc对文件上传的解析器来处理文 ...

  3. bzoj 1195: [HNOI2006]最短母串【状压dp】

    我有病吧--明明直接枚举是否匹配就可以非要写hash,然后果然冲突了(--我个非酋居然还敢用hash 设f[s][i]为已选串状态为s并且最后一个串是i,还有预处理出g[i][j]表示最长有长为g[i ...

  4. bzoj 3528 [Zjoi2014]星系调查【树链剖分+数学】

    参考:https://www.cnblogs.com/zhuohan123/p/3698852.html 首先,根据点到直线距离公式 \[ d=\frac{kx_0-y_0+b}{\sqrt{k^{2 ...

  5. 多选下拉框（select 下拉多选）

    方法一:使用multiple-select.js和multiple-select .css实现 HTML代码: <select id='checkedLevel' style="wid ...

  6. 使用redis构建分布式锁

    Redis使用WATCH命令来代替对数据进行加锁,因为WATCH只会在数据被其他客户端抢先修改了的情况下通知执行了这个命令的客户端,但是不会阻止其他客户端对数据进行修改,所以这个命令被称为乐观锁. 但 ...

  7. web项目tomcat启动url自定义（去掉项目名）

    通常,使用maven构建web项目,启动时默认的访问路径: http://ip:port/项目名 很多时候我们不喜欢这样 访问,我们希望下面的访问方式: http://ip:port 如果是本地的to ...

  8. java String类为什么是final的

    1.为了安全 java 必须借助操作系统本身的力量才能做事,jdk提供的很多核心类比如String,这类内的很多方法 都不是java编程语言本身编写的,很多方法都是调用操作系统本地的api,如果被继承 ...

  9. 【css】rem及其替换方案

    移动端的web前端开发其实经常会有一些令人头疼的问题,比如屏幕适配.1像素问题等,rem也是之前在屏幕适配上比较完善的一套方案,但是随着业务的深入,任何方案都有其优秀与不足的地方,rem这套方案也一样 ...

  10. 进击的Python【第十章】：Python的高级应用（多进程，进程间通信，协程与异步，牛逼的IO多路复用）

    Python的socket高级应用(多进程,协程与异步) 一.多进程multiprocessing multiprocessing is a package that supports spawnin ...