进度条

扫码查看

一、查询的时候:

    $.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>
12-18 19:26
查看更多