效果
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('同步完成... '); setTimeout(function(){ $('.container').fadeOut(); //location.href="http://sc.chinaz.com/"; },1000*60); } }) }