网页载入进度条中的javascript
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的更多相关文章
- HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等
今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- Unity发布WebGL时如何修改默认的载入进度条
Unity发布WebGL版本后,需要去除Unity的Logo,首先关闭Splash Image去除Made with Unity启动画面(在File->Build Settings->Pl ...
- iOS-仿支付宝加载web网页添加进度条
代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- ！！！！！安卓界面总是显示载入进度条的问题，没事别乱用ListFragment
近期的安卓应用快完工了.可是个别界面有瑕疵,怎么改动都解决不了.挥之不去的阴影.问题例如以下: 在界面上,数据已经载入完成了.可还是有一股圆形的进度条,感觉它老是在载入什么东西,严重影响界面美观: 1 ...
- JS网页顶部进度条demo
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 【CSS系列】网页头部进度条方式一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Unity3D中灵活绘制进度条
有时我们需要在Unity3D中绘制进度条,如: 或 如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...
- ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...
随机推荐
- firewall 实现数据的端口转发
端口转发:firewall-cmd --add-port=80/tcp firewall-cmd --add-port=10050/tcp firewall-cmd --add-forward-por ...
- Oracle12C查询自建用户（非系统自带）
select username from dba_users where INHERITED='NO';
- JDOM,dom4j方式解析XML
<?xml version="1.0" encoding="UTF-8"?> <dataSources> <!-- 定义MySQL ...
- Msql免安装版安装
文首提要: 我下载的MySQL版本是:mysql-5.7.17-winx64.zip Archive版:系统:Windows7 64位. 一.解压文件 下载好MySQL后, ...
- BZOJ 2565 最长双回文串（回文自动机）
题意 给一个长度为N的字符串S.对于一个字符串AB,如果A和B都是回文串,那么称AB是一个双回文串.求问S最长双回文子串的长度?N <= 100000 题解 正反双向构造回文自动机,得到某一个点 ...
- mysql 定时每秒插入一条数据
1.创建表 2.创建存储过程 CREATE PROCEDURE user()INSERT INTO user(name,sex) VALUES ('1111','1'); 3.创建定时器 CREATE ...
- （转）RestFul 无状态的一点认识
今天早上在Yahoo的邮件列表里看到一篇颇有意思的讨论,标题为RESTful vs. unRESTful: Session IDs and Authentication(51CTO编者注:意为REST ...
- IDEA设置控制台日志 不换行
最新版的IDEA设置控制台不自动换行位置如下:Setting->Editor->General->Console,不要勾选下图项即可.
- Android bluetooth介绍（一）：基本概念及硬件接口
关键词:蓝牙硬件接口 UART PCM blueZ 版本号:基于android4.2之前版本号 bluez内核:linux/linux3.08系统:android/android4.1.3.4作者 ...
- OC第二课
主要内容:实例变量可见度.方法 一.实例变量可见度 public(共同拥有的):实例变量能够在类的内部和外部使用 protected(受保护的.默认的):实例变量仅仅能在该类及其子类中使用 priva ...