网页载入进度条中的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 库提供线条,圆 ...
随机推荐
- oracle数据的启动
打开实例 , 数据库到nomount状态: startup nomount; 参数文件 内存,进程 指定控制文件数据库打开到mount状态: alter datatbase mount; 控制文件 ...
- python3 之 Ellipsis
在翻django 代码的时候无意中看到的, 主要还是在注解时候使用 官方参考:https://docs.python.org/3/library/constants.html#Ellipsis 注意: ...
- NOIp模拟赛二十九
又是受虐的一天呢~接下来四天都要打模拟赛QAQ 今日分数:0(100)+100+0=100 A题O(读入)结论题判断结果时没return 0被subtask卡成0分,喜提fstQAQ,B题DP,C题不 ...
- python做的 QQ未读消息图像
#!/usr/bin/pythonfrom PIL import Image ,ImageDraw, ImageFont#打开所在的文件im=Image.open('test.jpg')#获取图片对象 ...
- 2018秋寒假作业4——PTA编辑总结1
#include<stdio.h> #include<math.h> int main(void) { int n,i,j,p,m,ge,N,k; char op; ){ sc ...
- 制作PC端的安装程序
一个多月不写博客了,不造大家有没有想我,(别自恋了,寥寥无几的粉丝,谁会想你),呜呜~~~ 好了,废话少叙,借用郭德纲老板的话,天儿不早了,干点正事儿吧! 一.序 Unity开发者都知道,打包出来的e ...
- lower_bound与upper_bound
昨天一道题目用了lower_bound,大致了解了lower_bound指的是第一个>=x的位置.但是之前对于upper_bound有误解,其实upper_bound指的是第一个>x的位置 ...
- Oracle创建用户以及备份还原数据库操作
-- Create the user create user XX identified by "" default tablespace USERS temporary tabl ...
- Codeforces434D 网络流
思路: 题意:有n<=50个点,每个点有xi有[li, ri]种取值,-100 <= li <= ri <= 100,并且给定m<=100条边,每条边为u,v,d表示xu ...
- POJ 3670 DP LIS?
权值为1~3 好了 此题是水题-- i表示到了第i个数,j表示结尾的数是j f[i][j]=min(f[i][j],f[i-1][k]+(a[i]!=j)) 1<=k<=j 最长上升的. ...