网页载入进度条中的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 库提供线条,圆 ...
随机推荐
- WebKit.NET-0.5简单应用(2)——音量解决方案
查找WebKit.NET相关文档,没有找到音量控制解决方法.换思路进行解决,尝试用Win32 API进行解决 [DllImport("winmm.dll")] public sta ...
- solr环境搭建&基本使用
分步指南 solr服务与tomcat整合 solr使用配置步骤 solr使用 推荐分词工具 相关的文章 一．Solr服务与tomcat整合 1.solr相关版本下载路径:http://archive. ...
- Web长连接推送
http://www.workerman.net/web-sender http://wahahachuang5.iteye.com/blog/2311313
- hdoj 1429 胜利大逃亡(续) 【BFS+状态压缩】
题目:pid=1429">hdoj 1429 胜利大逃亡(续) 同样题目: 题意:中文的,自己看 分析:题目是求最少的逃亡时间.确定用BFS 这个题目的难点在于有几个锁对于几把钥匙.唯 ...
- Oracle rownum影响运行计划
今天调优一条SQL语句,因为SQL比較复杂,用autotrace非常难一眼看出哪里出了问题,直接上10046. SELECT AB.* FROM (SELECT A.*, rownum RN FROM ...
- USACO Ski Course Design解析和C语言实现
题目大意: John农场有N(1=<N<=1000)小丘陵(山),它们高度的范围从0 到 100 但仅仅有当最大的高度差不大于17时.才干够避税.John对它们进行改造,从高的丘陵上取土放 ...
- MySQ学习笔记之十 NULL值处理
这是MySQL一大特殊之处. 概念上.NULL意味着"没有值"或"未知值",且它被看作有点与众不同的值. 为了測试NULL.你不能使用算术比較运算符比如=.&l ...
- nyoj--1057--寻找最大数（三）(贪心)
寻找最大数(三) 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给出一个整数N,每次可以移动2个相邻数位上的数字,最多移动K次,得到一个新的整数. 求这个新的整数的最大 ...
- rest_framework 权限功能
权限: 问题:不用视图不用权限可以访问 基本使用 写上一个权限类 创建utils 中 permission.py文件 class SvipPermisson(object): message = &q ...
- SecondaryNameNode合并元信息过程