<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>progress</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
.ProgBar { border:1px solid black; width:353px; height:20px; background:#F1F1F1;float:left; }
#RealStatus { background:#3BB76E; height:20px; float:left;}
-->
</style>
<script type="text/javascript">
//<![CDATA[
/*
*totalWidth 进度条总宽度
*totalTime 总时间
*percent 进度条像素记录
*loopTimes 循环次数
*
*/
var progress={
totalWidth:'0',
totalTime:'0',
percent:'0',
interval:'200',
timer:'0',
times:'0',
init:function(w,t,i){
this.totalWidth = w;
this.totalTime = t;
this.interval = i;
this.loopTimes=Math.round(this.totalTime/(this.interval/1000))
},
loopTimes:0,
SetProgress:function(pid,showTime){
var status_bar = document.getElementById(pid);
status_bar.style.width = this.percent + 'px';
document.getElementById(showTime).innerHTML = Math.round(this.totalTime); /*显示时间，显示百分比：Math.round(this.percent/this.totalWidth*100) */
this.percent=(this.percent-0)+(this.totalWidth/this.loopTimes-0);
this.totalTime -= this.interval/1000;
this.times++;
},
startProgress:function(){
if(this.times > this.loopTimes){
alert("Jump to another page");
clearTimeout(this.timer);
this.timer=0;
}
else
{
this.SetProgress('RealStatus','timeNum1');
this.timer = setTimeout(function(){progress.startProgress();}, this.interval);
}
}
};
function uiOnload(){
progress.init(353,60,200);
progress.startProgress();
}
window.onload = uiOnload;
//]]>
</script>
</head>
<body>
<div class="ProgBar"><div id="RealStatus"></div></div><label id="timeNum1" style="width:50px;"> </label>second
</body>
</html>
分享到：
评论