php程序员的笔记 -> JavaScript教程 -> Jquery特效 -> jQuery实现的简单百分比进度条效果示例

jQuery实现的简单百分比进度条效果示例

jQuery实现的简单百分比进度条效果示例，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现的简单百分比进度条效果示例</title>
</head>
<script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
<script type="text/javascript">
    var progressId = "ProgressBarID", time = 30;

    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) {
            console.log("加载完毕");
            return;
        }
        if (i_ProgressBar <= 100) {
            setTimeout("doProgressBarLoading()", time);
            setProgressBar(i_ProgressBar);
            i_ProgressBar++;
        }
    }

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

    $(document).ready(function () {
        setProgressBarCss();
        doProgressBarLoading();
    });
</script>
<body>
<div id="ProgressBarID">
    <div>
    </div>
</div>
</body>
</html>

您可能感兴趣的文章

转载请注明出处：php程序员的笔记

本文永久地址：https://www.phpernote.com/jquery-effects/1572.html

最后修改时间：2020年06月28日 17时12分文章来源：yuhaomiao

上一篇：阿里云安装配置ElasticSearch搜索引擎

下一篇：jquery实现投票占比特效