基于jquery自己写了个进度条,可以进行简单配置。代码如下:
window.ui=window.ui||{};
window.ui.progressbar=window.ui.progressbar||{};
window.ui.progressbar={
progressArea:null,// 页面中的div id
isInited:false, // 初始化标记
bgImageUrl:null,// 背景图片
// 进度条初始化
initProgressBar:function (progressArea){
this.progressArea=progressArea;
// 顶层div样式
var ui_progressbar_container_css={
"color": "#784848",
"width": "30%",
"height": "32px",
"line-height": "32px",
"background-color":"#bdb76b",
"position": "absolute",
"left":"35%",
"top":"50%",
"z-index":"1004"
};
// 滚动div样式
var ui_progressbar_scroll_css={
"width": "0px",
"height": "32px",
"background": "#87ceeb",
"position": "absolute",
"background-image":"url("+this.bgImageUrl+")",
};
// 文字显示样式
var ui_progressbar_display_text_css={
"width": "100%",
"height": "32px",
"line-height": "32px",
"text-align": "center",
"position": "absolute"
};
// 构造进度条的div
$("<div id='ui_progressbar_container'/>").css(ui_progressbar_container_css).appendTo($("#"+this.progressArea));
$("<div id='ui_progressbar_scroll'/>").css(ui_progressbar_scroll_css).appendTo($("#ui_progressbar_container"));
$("<div id='ui_progressbar_display_text'/>").css(ui_progressbar_display_text_css).appendTo($("#ui_progressbar_container"));
},
loadingInterval:null,// 运行定时器
// 进度条运行方法
loading:function() {
var currentPoint = 0;
var percentage = null;
var that=this;
var hasSlowDwon=false;
var fun = function() {
if (currentPoint > 98) {
clearInterval(that.loadingInterval);
return;
}
if (currentPoint > 80) {
currentPoint += 1;
percentage = currentPoint;
if(!hasSlowDwon){
clearInterval(that.loadingInterval);
that.loadingInterval = setInterval(fun, 1000);
hasSlowDwon=true;
}
} else {
currentPoint += 1;
percentage = currentPoint;
}
that.changeProgressValue(percentage);
};
this.loadingInterval = setInterval(fun, 50);
},
// 进度条值改变方法
changeProgressValue:function(percentage){
$('#ui_progressbar_scroll').animate( { width : percentage + '%' }, 0, function() {
$('#ui_progressbar_display_text').text("Progress..." + percentage + "%");
});
},
// 进度条开始方法
startProgress:function(progressArea){
if(!this.isInited){
this.initProgressBar(progressArea);
this.isInited=true;
}
this.changeProgressValue(0);
this.loading();
$("#"+this.progressArea).show();
},
// 进度条完成方法
completeProgress:function(){
clearInterval(this.loadingInterval);
this.changeProgressValue(100);
$("#"+this.progressArea).hide();
}
};
测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery模拟页面加载进度条</title>
</head>
<body>
<div id="progressArea"></div>
<script type="text/javascript" src="../jslib/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jslib/customer.ui.simple.progressbar.js"></script>
<script>
window.ui.progressbar.bgImageUrl="logo000746.gif";// 设置背景图片
window.ui.progressbar.startProgress("progressArea");
setTimeout("window.ui.progressbar.completeProgress()",2000);// 结束进度条
</script>
</body>
</html>
分享到:
相关推荐
能够通过简单的html和js在页面进行进度条模拟
javascript 模拟进度条
简单用JS模拟上传进度条,没有用到后台页面,但是运行时需要服务器支持,否则会存在跨域问题。
这是一个模拟的文件上传的进度条;大家可以看看
javascript 模拟进度条
JavaScript模拟进度条,供大家一起共同分享学习。
js 实现 CSS+JS制作的进度条! 值得下载看看!资源免费,大家分享!!
用 Javascript 模拟的 Vista 风格进度条,程序很小,不过觉得很不错。
一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式...
php+js使用XMLHttpRequest通过js模拟表单提交上传视频同时实现进度条展示,上传后自动加载并播放功能。
可以通过html以及js模拟所需的各种进度条
支持PC和手机的音频播放JS,包含音频进度条,音频播放按钮,音频暂停和重播按钮。
本文实例讲述了jquery模拟进度条实现方法。分享给大家供大家参考。...js模拟进度条练习</title> [removed][removed] <script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jque
Js实现仪表盘 利用js模拟仪表盘的实现
进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法...
javascript 模拟三维地球,并且模拟多颗卫星环绕地球轨道展示,可以拖动进度条查看卫星实时位置信息
本文实例讲述了Ajax+PHP实现的模拟进度条功能。分享给大家供大家参考,具体如下: 一 代码 fun.js: function progress(){ setInterval(beginProgress(), 200); } function beginProgress(){ $.get(progress.php,...
jquery+jquery.uploadify.js插件,实现无刷新上传文件 支持ie6,模拟进度条(模拟进度条,非正式进度) 无刷新上传 ashx处理.
绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 <br>javascript收藏 1.页面校验 1.文本框约束输入 2.表单校验工具库 3.文本框部分内容不让改变 2.下拉框类 ...
效果描述: 一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式拷贝...