权祖

进度条

一、查询的时候：

    $.ajax({
        beforeSend:function(){
            $("#tableDiv").html('<h1 style="color:green">正在加载中,请稍后......'
                    +'<img style="height:80px;width:80px" src="http://spider.nosdn.127.net/2964c767d5798be6c8f83739fb5689b9.gif"></h1>');
        },
        url: '/co/biservicereportday/selectlist',
        type: "GET",
        dataType: "json",
        //async: false,
        cache:false,//清除浏览器缓存
        success: function (output) {
            /*第一部分*/
            var basicsOut = output["basicsMap"];
　　　　}
}）

二、显示的时候

<html>
<head>
<title>进度条</title>
<style
 type="text/css"> 
.container{ 
   width:450px; 
   border:1px
 solid #6C9C2C; 
   height:25px; 
 }
#bar{ 
   background:#95CA0D; 
   float:left;
   height:100%; 
   text-align:center; 
   line-height:150%;
 } 
</style> 
<script
 type="text/javascript"> 
  function run(){ 
        var bar
 = document.getElementById("bar");
        var total
 = document.getElementById("total");
    bar.style.width=parseInt(bar.style.width)
 + 1 + "%"; 
    total.innerHTML
 = bar.style.width; 
    if(bar.style.width
 == "100%"){ 
      window.clearTimeout(timeout);
      return;
    }
    var timeout=window.setTimeout("run()",100);
  }
    window.onload
 = function(){ 
       run();
    } 
</script>
  
</head>
<body>
  <div
 class="container">
   <div
 id="bar" style="width:0%;"></div> 
  </div> 
  <span
 id="total"></span>
</body>
</html>

posted on 2019-12-13 16:05  IT磊哥  阅读(195)  评论(0)  编辑  收藏  举报

导航