<!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. mysql 数据库的名称不能以数字开头

    mysql  数据库的名称不能以数字开头

  2. Identity 使用的命名空间

    必须在视图或控制器类中引用 了using Microsoft.AspNet.Identity 这个命名空间. using Microsoft.AspNet.Identity; 才能使用它User.Id ...

  3. Tomcat相关的LNMT和LAMT

    Tomcat相关的LNMT和LAMT LNMT:Linux Nginx MySQL Tomcat Client (http) --> nginx (reverse proxy)(http) -- ...

  4. jvm学习理解

    1.本文是转载别人所写的,因为这个jvm看很多遍老是忘,转载只是备忘和查看方便. 转载地址: https://mp.weixin.qq.com/s/reFDCkUdq1QGGDs_Mnuesg 图中涉 ...

  5. Python机器学习算法 — 关联规则（Apriori、FP-growth）

    关联规则 -- 简介 关联规则挖掘是一种基于规则的机器学习算法,该算法可以在大数据库中发现感兴趣的关系.它的目的是利用一些度量指标来分辨数据库中存在的强规则.也即是说关联规则挖掘是用于知识发现,而非预 ...

  6. bzoj 4584: [Apio2016]赛艇【dp】

    参考:https://www.cnblogs.com/lcf-2000/p/6809085.html 设f[i][j][k]为第i个学校派出的赛艇数量在区间j内,并且区间j内共有k个学校的方案数 把数 ...

  7. java多线程模拟龟兔赛跑

    让乌龟和兔子在同一个赛道从1开始跑到100,看看谁更快. public class Racer implements Runnable{ private static String winner;// ...

  8. 【原创】《从0开始学Elasticsearch》—初识Elasticsearch

    目录 1. Elasticsearch 是什么2. Elasticsearch 中基本概念3. Elasticsearch 安装4. 访问 Elasticsearch 1. Elasticsearch ...

  9. Python圈中的符号计算库-Sympy（转载）

    <本文来自公众号“大邓带你玩python”,转载> import math math.sqrt(8) 2.8284271247461903 我们看看Python中结果 math.sqrt( ...

  10. 《windows核心编程系列》十五谈谈windows线程栈

    谈谈windows线程栈. 当系统创建线程时会为线程预订一块地址空间区域,注意仅仅是预订.默认情况下预定的这块区域的大小是1MB,虽然预订这么多,但是系统并不会给全部区域调拨物理存储器.默认情况下,仅 ...