网页载入进度条中的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 库提供线条,圆 ...
随机推荐
- 定时清理clientmqueue目录垃圾文件防止占满磁盘空间
RedHat/CentOS 5.8 默认就有sendmail,而6.4默认没有. 手动清理方法: find /var/spool/clientmqueue/ -type f|xargs rm -f ...
- (GDOI2018模拟九)【UOJ#192】【UR#14】最强跳蚤
(开头先Orz myh) 原题目: 在人类和跳蚤的战争初期,人们凭借着地理优势占据了上风——即使是最强壮的跳蚤,也无法一下越过那一堵坚固的城墙. 在经历了惨痛的牺牲后,跳蚤国王意识到再这样下去,跳蚤国 ...
- POJ 3261 Milk Patterns(后缀数组+单调队列)
题意 找出出现k次的可重叠的最长子串的长度 题解 用后缀数组. 然后求出heigth数组. 跑单调队列就行了.找出每k个数中最小的数的最大值.就是个滑动窗口啊 (不知道为什么有人写二分,其实写啥都差不 ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- Json学习总结(2)——Java 下的 JSON库性能比较:JSON.simple vs. GSON vs. Jackson vs. JSONP
JSON已经成为当前服务器与WEB应用之间数据传输的公认标准,不过正如许多我们所习以为常的事情一样,你会觉得这是理所当然的便不再深入思考了.我们很少会去想用到的这些JSON库到底有什么不同,但事实上它 ...
- ajax异步刷新
前台js <script type="text/javascript"> function getLands() { $.ajax({ url:"httpse ...
- python __future__ 的几种特性
今天看tensorflow的代码,看到python里面有这么几句: from __future__ import absolute_import from __future__ import divi ...
- Android Bitmap太大导致ImageView不显示的问题
今天做我们的智能相冊的项目时,遇到了非常奇妙的问题,当照片太大时,导致ImageView.setImageBitmap不显示,上网上搜了非常多办法.感觉都不是那么靠谱.最后使用了简单粗暴的手段: // ...
- 改动Android设备信息,如改动手机型号为iPhone7黄金土豪版!
首先你的手机必需要有ROOT权限,误操作有风险需慎重 请先开启手机的USB调试,防止手机改动后无法启动时导致的无法修复 1.假设你是在手机上改动,直接使用RE文件管理器,编辑/system/build ...
- 上传canvas图片到服务器
canvas绘图后用 canvasDom.toDataURL()可以得到png格式图片的base64 dataURI 然后用ajax post给后台 ,后端程序把开头的data:image/png; ...