网页加载进度条中的javascript
2015-06-12 10:34
579 查看
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% var progress = 1; // 生成随机数 var random = function(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }; // 跑进度 var onprogress = function () { // 随机时间 var timeout = 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>
相关文章推荐
- JavaScript中的toDateString()方法使用详解
- 推荐一款插件layim.js 阿里大牛贤心制作的一款webim聊天插件
- 201506120856_《JavaScript——客户端与服务器端的通信》
- IE6 IE7 不支持 JSON
- ExtJs 入门教程
- js中substr和substring两个方法的区别
- ExtJs 入门教程五[文本框:TextField]
- eval、json.parse()的介绍和使用注意点
- json和jsonp的联系和区别(转载)
- 在JavaScript中操作时间之setYear()方法的使用
- JavaScript 数字格式化函数
- js获取当前项目的根目录
- <转> Javascript的赋值是引用or复制,及参数传递
- Html下拉框Js对象属性方法总结
- 保留json字符串中文的函数,代替json_encode
- 简介JavaScript中setUTCSeconds()方法的使用
- JS中产生标识符方式的演变
- JS中处理时间之setUTCMinutes()方法的使用
- JS、JSP省市区切换
- 【JavaScript 6—基础知识点】:正则表达式(应用)