jquery --- 定时器和实时进度条

效果

jindutiao.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jquery+html5实现进度条加载特效 - 站长素材</title>
  <link rel="stylesheet" href="styles/progressbar.css">
</head>
<body>
<br><br>
  <section class="container">
    <div class="progress">
      <span class="blue" style="0%;"><span>0%</span></span>
    </div>
  </section>
  <script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/CFInstall.min.js"></script>
<script type="text/javascript" src="js/ext-core.js"></script>
<script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="js/dojo.xd.js"></script>
<script type="text/javascript" src="js/jindutiao.js"></script>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><br>
</div>
</body>
</html>

jindutiao.js

window.onload = function() {
    //假设这里每个五分钟执行一次test函数 
    publicBusi();
    //personBusi();
}
function publicBusi() {
    setTimeout(publicBusi, 1000 * 60 * 1); //这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共7分钟 1000 * 60 * 7
    $.ajax({
        type : "POST",
        url : "../dataSyn/queryProgress.do",
        data : {
            "id" : 108
        },
        dataType : "json",
        success : function(data) {
            var percent = data + "%";
             loading(percent);
        }
    });
}
function loading(percent){
    $('.progress span').animate({percent},1000,function(){
        $(this).children().html(percent);
        if(percent=='100%'){
            $(this).children().html('同步完成...&nbsp;&nbsp;&nbsp;&nbsp;');
            setTimeout(function(){
                $('.container').fadeOut();
                //location.href="http://sc.chinaz.com/";
            },1000*60);
        }
    })
}

jquery --- 定时器和实时进度条

附件列表