jQuery实现简单的百分比进度条

一、JS Code：

    <script type="text/javascript">

        var progressId = "ProgressBarID";

        function setProgressBar(progress) {

            if (progress) {

                $("#" + progressId + " > div").css("width", String(progress) + "%");

                $("#" + progressId + " > div").html(String(progress) + "%");

            }

        }

        var i_ProgressBar = 0;

        function doProgressBarLoading() {

            if (i_ProgressBar > 100) {

                alert("加载完毕?！！");

                return;

            }

            if (i_ProgressBar <= 100) {

                setTimeout("doProgressBarLoading()", 10);

                setProgressBar(i_ProgressBar);

                i_ProgressBar++;

            }

        }

        function setProgressBarCss() {

            $("#" + progressId + "").css({ "width": "300px", "height": "25px" });

            $("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });

        }

        $(document).ready(function () {

            setProgressBarCss();

            doProgressBarLoading();

        });

    </script>

 

二、Html Code：

        <div id="ProgressBarID">

            <div>

            </div>

        </div>