<!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. HDU 5907 Find Q (水题)

    题意:在他眼前有一个小写字母组成的字符串SSS,他想找出SSS的所有仅包含字母'q'的连续子串. 析:这个题,很容易发现,有 n 个连续个q,就是前 n 项和.注意不要超 int. 代码如下: #pr ...

  2. FOJ2252:Yu-Gi-Oh!

    传送门 题意 略 分析 枚举合成ab的数量,在此基础上合成bc和ac,复杂度\(O(n)\) trick 代码 #include<cstdio> #include<algorithm ...

  3. js下传递的时间用strtotime()函数解析差8小时

    php  日期转时间戳: $time = $_POST["time"];$time = strtotime($time)-8*3600; php 时间戳转日期: date_defa ...

  4. 《windows核心编程系列》一谈谈windows中的错误处理机制

    错误处理 我们写的函数会用返回值表示程序执行的正确与否,使用void,就意味着程序一定不会出错.Bool类型标识true时为真,false时为假.其他类型根据需要可以定义成不同意义. Windows除 ...

  5. Bootstrap简介及安装使用

    Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的 ...

  6. Linux环境下HDFS集群环境搭建关键步骤

    Linux环境下HDFS集群环境搭建关键步骤记录. 介质版本:hadoop-2.7.3.tar.gz 节点数量:3节点. 一.下载安装介质 官网下载地址:http://hadoop.apache.or ...

  7. Styles and Themens(4)android自定义主题时可使用的属性

    A list of the standard attributes that you can use in themes can be found at R.styleable.Theme. Cons ...

  8. iOS开发之邮件发送代码

    邮件发送功能是由MessageUI Framework提供的,这个框架是iPhone sdk中最简单的框.由一个类.一个视图控制器,一个protocol组成. 一.创建视图控制器: MFMailCom ...

  9. 转 pygame学习笔记（1）——安装及矩形、圆型画图

    http://www.cnblogs.com/xiaowuyi/archive/2012/06/06/2538921.html

  10. unix shell 解析 1

    ---- shell 1 testdb3:/home/oracle [pprod] >more /home/oracle/utility/macro/tns_log_back_12c.sh #! ...