javascropt实现简单的进度条

Posted on 2007-05-24 15:49 秋天叶落阅读(728) 评论(1) 收藏举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

.divbody{

z-index:2;

left:2%;

visibility:hidden;

width:98%;

cursor:crosshair:

position:absolute:

top:40px;

height:96%;

background-color:#ffffcc;

}

color:#cc6633;

font-weight:bold;

}

.divprogress{

border-right:black 1px solid;

padding-right:3px;

border-top:black 1px solid;

padding-left:3px;

font-size:10pt;

padding-bottom:2px;

border-left:black 1px solid;

padding-top:2px;

border-bottom:black 1px solid;

}

</style>

//设置span元素的编号

var progressEnd=16;

//设置进度条的背影为蓝色

var progressColor="blue";

//设置进度条的走动时间-----毫秒为单位

var progressInterval=350;

//时度条的开始标志

var progressBegin=0;

var progressTimer;

function progress_clear(){

//清空定时器

clearTimeout(progressTimer);

//隐藏div

window.alert("连接成功!!!!!!")

document.getElementById("framediv").style.visibility="hidden";

}

//逐个显视<span>

function progress_update(){

progressBegin++;

//如果开始标志己经在于结束标志

if(progressBegin>progressEnd){

progress_clear();

}else{

document.getElementById("progress"+progressBegin).style.backgroundColor=progressColor;

//在一定的时间间隔内循环更新进度条

progressTimer=setTimeout("progress_update()",progressInterval);

}

//单击事件

function linkto(){

document.getElementById("framediv").style.visibility="visible";

progress_update();

}

</script>

</HEAD>

<BODY>

<br/>

<p>正在连接站点，请稍候

.</p>

</td></tr>

</table>

</div>

</BODY>

</HTML>

刷新页面返回顶部

秋天叶落

导航

公告

javascropt实现简单的进度条