2015-07-11 08:53

关注

JQuery入门——进度条（转）

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

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

引用 google 的 jquery 库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js "></script>

引用微软的 jquery 库：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js "></script>

推荐引用 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>

<!--加载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>

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