jQuery入门——进度条

文章由LinuxBoy分享于2019-04-01 07:04:05热评（309）

jQuery入门——进度条

越来越觉得常规javascript已经跟不上节奏了，打算学点进阶的，从JQuery学起。

JQuery是一个Javascript库，可以从JQuery.com下载，放到本地，用

语句来引用。如果不想下载jquery，可以引用web上的jquery库，从google或微软的服务器上引用他们的jquery库。

引用google的jquery库：

引用微软的jquery库：

推荐引用google或者微软的jquery库。许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

所有的JQuery函数都位于一个 document ready 函数中

$(document).ready(function(){
--- jQuery functions go here ----
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

Jquery选择器就不讲了。两个要注意的地方都说完了，下面演示一个实例，我把以前用常规javascript写的进度条用jquery有重新写了一遍，虽说用的知识点都很简单，但写出来也费了我一番心思的，因为有些东西和常规javascript还是不一样，这个放在代码后面说。下面是进度条完整代码。

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

<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>

这次主要花了些时间在实现百分值的增长上，因为要用到setTimeout()函数,在jquery中，setTimeout(code,delay)里面的code如果是函数的话只要填函数名就行了，不需要引号，不需要括号。比如，有一个function show()，设置500ms后调用show()，在jquery中应该这样写：

setTimeout(show, 500);

而在传统javascript里面却要这样写：

setTimeout("show()", 500);

这一点对于setInterval()也是一样的。

------------------------------------------分割线------------------------------------------

jQuery权威指南 PDF版中文+配套源代码

jQuery实战中文PDF+源码

《jQuery即学即用（双色）》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示

jQuery基础教程(第4版) PDF 完整高清版+配套源码

--------------------------------------分割线 --------------------------------------

jQuery 的详细介绍：请点这里
jQuery 的下载地址：请点这里

本文永久更新链接地址：

推荐文章：

jQuery入门——进度条