jQuery进度条的使用方法

最新推荐文章于 2021-09-09 20:12:57 发布

最新推荐文章于 2021-09-09 20:12:57 发布 · 203 阅读

文章标签：

#jQuery #JavaScript #CSS #HTML #ViewUI

本文介绍了一个基于jQuery的进度条插件实现方法，通过JavaScript动态更新进度条的状态，并使用CSS进行样式定制。用户可以通过点击按钮来启动或停止进度条的增长。

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