demo 地址:http://output.jsbin.com/buquyedosa
思路例如以下:代码都有凝视,就不一一介绍了。
- <!DOCTYPE html>
- <html>
- <head lang="zh-cn">
- <meta charset="UTF-8">
- <title>进度条</title>
- <style>
- .progress{position: fixed;top: 0;right: 0;left: 0;height: 20px;background: #f5f5f5;border-bottom: 1px solid#ddd;}
- .progress-inner{width: 1%;background: #abcdef;position: absolute;top: 0;left: 0;bottom: 0;}
- </style>
- </head>
- <body onprogress="">
- <div class="progress">
- <div class="progress-inner" id="progress"></div>
- </div>
- <script>(function (){
- // 获取进度条 div
- var$progress = document.getElementById('progress');// 初始进度,1%
- varprogress =1;// 生成随机数
- varrandom =function(min, max){
- return Math.floor(Math.random() * (max - min +1) + min);
- };// 跑进度
- varonprogress =function (){
- // 随机时间
- vartimeout = random(10,30);
- setTimeout(function (){
- // 假设页面载入完成,则直接进度到 100%
- if(window.loaded){
- $progress.style.width ='100%';return;
- }// 随机进度progress += random(1,5);// 随机进度不能超过 98%,以免页面还没载入完成。进度已经 100% 了
- if(progress >98){
- progress =98;
- }
- $progress.style.width = progress +'%';
- onprogress();
- }, timeout);
- };// 開始跑进度onprogress();
- window.onload =function(){window.loaded =true;
- };
- })();</script>
- <iframe src="http://baidu.com/" frameborder="0"></iframe>
- <iframe src="http://163.com/" frameborder="0"></iframe>
- <iframe src="http://qq.com/" frameborder="0"></iframe>
- <iframe src="http://tencent.com/" frameborder="0"></iframe>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2125263.html