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" 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>

 

posted @ 2016-02-28 17:53  b̶i̶n̶g̶.̶  阅读(314)  评论(0)  编辑  收藏  举报