关键词：
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>android开发_layerlistdrawable（层叠图片）在进度条中的应用
1创建工程，准备好进度条背景图片和进度图片，放在res-drawable-hdpi文件夹中2在activity_main.xml中创建“进度条控件” 3在res文件夹下创建drawable文件夹，并创建Layer-list类型的文件，创建出来的问价夹后缀为.xml（相当... 查看详情
javascript常用进度条
1.通过加载状态事件制作进度条：知识点： document.onreadystatechange//页面加载状态改变时的事件document.readyState//返回当前文档的状态uninitialized-还未开始载入loading-载入中interactive-已加载，文档与用户可以开始交互complete-载入完... 查看详情
在android进度条中删除进度条背景
】在android进度条中删除进度条背景【英文标题】：Removeprogressbarbackgroundinandroidprogressbar【发布时间】：2014-08-0516:20:51【问题描述】：如何去除灰色背景，只在进度条中显示蓝色进度条。【问题讨论】：见***.com/questions/16893209/…这... 查看详情
获取 ASP.NET GridView 单元格值并在 JQuery 进度条中显示
】获取ASP.NETGridView单元格值并在JQuery进度条中显示【英文标题】：GetASP.NETGridViewcellvalueandshowinJQueryProgressBar【发布时间】：2012-04-0507:58:16【问题描述】：我有一个从SQLServer数据库填充的ASP.NETGridView。这工作正常。我后面的代码使... 查看详情
长度在进度条中显示减号
】长度在进度条中显示减号【英文标题】：lengthshowsminusinprogressbar【发布时间】：2019-11-1814:20:10【问题描述】：我正在从URL下载视频，当我试图获取进度时它显示负值，在下面我添加了我的代码，byte[]buffer=newbyte[1024];intlen1=0;longto... 查看详情
进度条中具有负最小值的 C# 表单
】进度条中具有负最小值的C#表单【英文标题】：C#Formswithnegativeminimumvalueinprogressbar【发布时间】：2021-07-1403:56:13【问题描述】：我需要显示一个具有负值的进度条，但是当我尝试将值修改为负数时，c#会出现错误（无效属性错误... 查看详情
从 ffmpeg 获取实时输出以在进度条中使用（PyQt4，stdout）
】从ffmpeg获取实时输出以在进度条中使用（PyQt4，stdout）【英文标题】：Gettingrealtimeoutputfromffmpegtobeusedinprogressbar(PyQt4,stdout)【发布时间】：2011-11-2918:16:52【问题描述】：我已经查看了许多问题，但仍然无法完全弄清楚这一点。我... 查看详情
将 rsync 进度包装在 gui 中的最佳方法？
】将rsync进度包装在gui中的最佳方法？【英文标题】：Bestwaytowraprsyncprogressinagui?【发布时间】：2010-09-0516:47:08【问题描述】：我使用rsync以与服务器无关的方式将文件同步到Windows客户端。有哪些方法可以将rsync的进度发送到父进... 查看详情
从android中的sql server下载表格行时显示进度条
】从android中的sqlserver下载表格行时显示进度条【英文标题】：showprogress-barwhiledownloadingtablerowfromsqlserverinandroid【发布时间】：2017-05-2200:26:06【问题描述】：我正在从android中的sqlserver获取表行，我想在进度条中显示，但我遇到了... 查看详情
网页加载进度条
...下： 1.定时器的进度条（假的） <scripttype="text/javascript"> &nbs 查看详情
UIslider 和 UI 进度视图嵌入
】UIslider和UI进度视图嵌入【英文标题】：UIsliderandUIprogressviewembedded【发布时间】：2016-12-1208:51:16【问题描述】：我正在尝试构建一个嵌入在进度条中的滑块，以便滑块的最小图像与进度条“进度图像”一致，并且用户只能在“... 查看详情
第 1000 条中的休眠标准分手
】第1000条中的休眠标准分手【英文标题】：HibernateCriterionINClause1000breakup【发布时间】：2013-01-2921:56:23【问题描述】：嗨，我有这个大型的oraclehibernateweb应用程序，它似乎给出了这个错误ORA-01795:maximumnumberofexpressionsinalistis1000我需... 查看详情
$0/条中的免费交易
】$0/条中的免费交易【英文标题】：$0/freetransactionsinstripe【发布时间】：2017-10-0423:02:08【问题描述】：我在Stripe中建立了一个优惠券/优惠券系统，并有以下场景。客户优惠券价值：50美元商品价格：25美元代金券系统计算出客户... 查看详情
滚动条中的中心缩略图（jQuery）
】滚动条中的中心缩略图（jQuery）【英文标题】：centrethumbnailinscrollbar(jQuery)【发布时间】：2011-01-0119:25:46【问题描述】：请查看此页面：http://onomadesign.com/wordpress/identity-design/hans-appenzeller/右侧的缩略图链接到不同的投资组合项... 查看详情
spin.js-css动画进度载入器
spin.js是一款很easy的CSS载入器，他是一款使用了VML（VectorMakeupLanguage）的CSS动画效果。spin.js的特性他有着很强大的适应性。有着下面几个特性：1. 没有额外的图片。也没有添加的外部CSS文件2. 不... 查看详情
如何让网页中的js函数自动执行？
...行！①第一种方法将如上代码改为：<SCRIPTLANGUAGE="JavaScript">functionnMyAutoRun()//以下是您的函数的代码，请自行修改先！alert("函数自动执行哦！");window.onload=MyAutoRun;//仅需要加这一句</SCRIPT>②第二种方法修改... 查看详情
使用自动布局在条中的项目之间排列水平空间
】使用自动布局在条中的项目之间排列水平空间【英文标题】：Arrangehorizontalspacebetweenitemsinabarusingautolayout【发布时间】：2017-07-1909:51:58【问题描述】：我目前有一个这样的视图，我如何设置约束以在所有屏幕尺寸下像Iphone7评论... 查看详情
unity3d中制作异步loading进度条所遇到的问题
背景通常游戏的主场景包括的资源较多，这会导致载入场景的时间较长。为了避免这个问题，能够首先载入Loading场景。然后再通过Loading场景来载入主场景。由于Loading场景包括的资源较少，所以载入速度快。在载入主场景的时候... 查看详情