jQuery进度条的使用方法

springking

浏览: 132063 次
性别:
来自: 成都

最近访客更多访客>>

star84064686

lfrick

cmdjqxclb

bailixiang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery JavaScript CSS HTML

下载jqueryprogressbar.js

源码如下：

页面代码：

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT src="jqueryprogressbar.js" type="text/javascript"></SCRIPT>

<SCRIPT type=text/javascript>
    var pct=0;
    var handle=0;
    function update(){
            $("#progressbar").reportprogress(++pct);
            if(pct==100){                                                //设定总长度值
                clearInterval(handle);
                $("#run").val("start");
                pct=0;
            }
    }
    jQuery(function($){
        $("#run").click(
            function(){
                if(this.value=="start"){
                    handle=setInterval("update()",100);               //设定增长的时间
                    this.value="stop";
                }else{
                    clearInterval(handle);
                    this.value="start";
                }
            }
        );
        $("#reset").click(function(){
            pct=0;
            $("#progressbar").reportprogress(0);
        });
    });
</SCRIPT>

<STYLE>
    #progressbar {
        BORDER-RIGHT: black 1px solid;
        BORDER-TOP: black 1px solid;
        BORDER-LEFT: black 1px solid;
        WIDTH: 200px;
        COLOR: black;
        BORDER-BOTTOM: black 1px solid;
        POSITION: relative; HEIGHT: 20px
    }
    #progressbar DIV.progress {
        OVERFLOW: hidden;
        WIDTH: 0px;
        POSITION: absolute;
        HEIGHT: 100%;
        BACKGROUND-COLOR: blue;
    }
    #progressbar DIV.progress .text {
        COLOR: white;
        POSITION: absolute;
        TEXT-ALIGN: center; FONT-SIZE:larger;
    }
    #progressbar DIV.text {
        WIDTH: 100%;
        POSITION: absolute;
        HEIGHT: 100%;
        TEXT-ALIGN: center;
        FONT-SIZE:larger;
    }
</STYLE>
</HEAD>
    <BODY>
    <DIV id="progressbar">

    </DIV>
    <INPUT id="run" type="button" value="start"> <INPUT id="reset" type="button" value="reset">
    </DIV>
    </DIV>
    </DIV>
    </BODY>
</HTML>

分享到：

一个简易的javascript网页图片浏览器 | 一个简单的jQuery插件ajaxfileupload实现aj ...

2008-05-29 22:44
浏览 19212
评论(6)
查看更多

6 楼 liuweihug 2014-05-22

Jquery 简单大方美观的进度条插件-NProgress中文使用说明 - 前端编程 - IT工作生活这点事。Just Such So!
http://www.suchso.com/UIweb/Jquery-simple-beautity-progress-nprogress-cn.html

5 楼 YaYa毕汝 2012-08-15

这是假的进度条把，怎么实现真实的进度条呀，用struts +jquery 实现点击按钮加载进度条

4 楼 hank 2009-09-24

好靓啊！

3 楼 mylovemjg 2008-11-19

正点，。正点

2 楼 springking 2008-05-30

这个进度条只能按时间来显示进度，还不知道按传输量怎么来计算。

1 楼 hellojim 2008-05-30

好象没有用啊?

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论