前端进度条实现

在前端，实现网页的进度条目前还没有一个比较精确的方案，都是一些模拟进度。即页面打开的时候是 1%，然后定时器增加进度到 99%，然后 window.onload 之后，进度跑到 100%。

在前端，ajax 资源的上传和下载，html5 中都可以获取进度的，此文不谈。

实现准备

html 文件

<!DOCTYPE html>
<html>
<head lang="zh-cn"><meta charset="UTF-8"><title>进度条</title>
</head>
<body ontouchstart=""></body>
</html>

先写一个进度条 div，放在body最前面。

<div class="progress"><div class="progress-inner" id="progress"></div>
</div>

在写样式：

<style>.progress{position: fixed;top: 0;right: 0;left: 0;height: 20px;background: #f5f5f5;border-bottom: 1px solid #ddd;}.progress-inner{width: 0;background: #d43f3a;position: absolute;top: 0;left: 0;bottom: 0;}
</style>

为了显示进度，还需要添加几个 iframe：

<iframe src="http://baidu.com/" frameborder="0"></iframe>
<iframe src="http://163.com/" frameborder="0"></iframe>
<iframe src="http://qq.com/" frameborder="0"></iframe>

脚本

接下来开始写脚本，将进度条展示的脚本写在页面的最顶部，保证它是最先运行的，这样进度条才更加真实。

<script>(function () {// 获取进度条 divvar $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>

完整的内容

<!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: #d43f3a;position: absolute;top: 0;left: 0;bottom: 0;}
</style>
</head>
<body ontouchstart=""><div class="progress"><div class="progress-inner" id="progress"></div>
</div><script>(function () {// 获取进度条 divvar $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></body>
</html>

转自：http://frontenddev.org/article/how-to-use-javascript-to-do-a-high-force-the-progress-bar.html#toc-2-1-d36f0d44d1a6803fad4d0260e19ff9ba

ikeepstudying.com

如何用 javascript 做一个高逼格的进度条相关推荐

excel怎么启用宏_如何用Excel制作一个高逼格的项目管理模板
在工作中我们经常用到项目管理,尤其是公司里的PM们(ProgramManager),从专业应用角度讲我们可以使用Project等软件进行项目管理,但这类软件一般需要经过专业培训才能上手,并且需要额外收 ...
python朋友圈为什么这么火-看我如何用Python发一个高逼格的朋友圈
用工匠精神打造精彩文章,分享最新科技资讯,从不同角度剖析资讯内容,剑走偏锋是我的态度,茶余饭后聊百味!各位读者们老爷们好吖,我是文艺与气质于一身实力派小编--小宸,这里可以让您看到最新最有趣的资讯内容 ...
vbs做一个会动的进度条_重装系统前后都需要做哪些工作？这几点需注意！
对于重装系统,这是一个老生常谈的话题了,相信大家并不陌生.不过对于小白而言,往往不太清楚在重装系统前需要做些什么准备,重装系统后又该做哪些优化等这类的问题.今天这篇文章,就是系统的讲解一下重装系统前后 ...
python朋友圈图片_用Python发一个高逼格的朋友圈
原标题:用Python发一个高逼格的朋友圈今天要给大家介绍一个Python库:PIL(Python Image Library) 下面我们用一个实际的例子,看看50行python代码可以做什么神奇的 ...
打造一个高逼格的android开源项目——小白攻略
小引子在平时的开发过程中,我们经常会查阅很多的资料,最常参考的是 github 的开源项目.通常在项目的主页面能看到项目的简介和基本使用,并且时不时能看到页面汇中有好多的彩色标签,看起来很酷,很专业 ...
如何用Excel做一个战斗模拟器(一)升级经验表
如何用Excel做一个战斗模拟器(二)属性表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引引言确定战斗公式与怪物强度确定人物升级经验确定人物升级时间确定升级所需经验引言作 ...
如何用Excel做一个战斗模拟器(三)战斗过程模拟
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(二)属性表目录索引定义战斗子过程定位战斗双方基础属性利用基础属性与战斗公式进行计算战斗过程的运算与输出判 ...
android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机
原标题:[自制样机教程]如何用Ps做一个压痕效果的Logo样机上次教你们做的自制小糖袋的贴图样机不知道你们玩耍的咋样今天再给你们介绍一个logo的样机这次的教程主要用到了图层样式来看看怎么 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

如何用 javascript 做一个高逼格的进度条

前端进度条实现

实现准备

脚本

完整的内容

如何用 javascript 做一个高逼格的进度条相关推荐

最新文章

热门文章