JS网页顶部进度条demo

最新推荐文章于 2023-02-04 11:54:34 发布

weixin_30237281

最新推荐文章于 2023-02-04 11:54:34 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gaobing/p/5225228.html

版权

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面加载进度条</title>
    <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        
       var loadProcess = function (config) {
          var count = 0;
          var id = config.id;
          var divTxt = "#"+id ;
          $("body").prepend('<div id="' + id + '" style="width: 0%; height:5px; background: green; "></div>' );
    
            /*更新进度条*/
            this.updateProcess = function (percent) {
                setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);
                if (percent == 100) {           /*100%就从页面移除loading标签*/
                    setTimeout(function () {
                        $(divTxt).hide(500);
                        setTimeout(function () { $(divTxt).remove() }, 500);
                    }, count * 500 + 800);
                }
            };
        }

    </script>

    <style>
    body{margin:0px;}
    </style>
</head>
<body>
<div style="border:1px solid red;width:100%; height:100px;"> content.......</div>
</body>

<script type="text/javascript">
    
    /*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/
    var p = new loadProcess({"id":"loading"});
    p.updateProcess(30);
    p.updateProcess(57);
    p.updateProcess(60);
    p.updateProcess(70);
    p.updateProcess(80);
    p.updateProcess(100);
</script>

</html>

转载于:https://www.cnblogs.com/gaobing/p/5225228.html

weixin_30237281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS网页顶部进度条demo

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面加载进度条</title> <script src="/Scripts/jquery-1.10.2.min.js...
复制链接

扫一扫