改进后的进度条

Posted on 2008-01-03 11:52 五子登科阅读(130) 评论(0) 编辑收藏举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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=150;

//时度条的开始标志

var progressBegin=0;

var progressTimer;

//逐个显视<span>

function progress_update(){

progressBegin++;

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

if(progressBegin>progressEnd){

progressBegin=0;

clearall();//清空，重头循环

progress_update();

}else{

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

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

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

}

//单击事件

function clearall()

{

for(var i=1;i<=progressEnd;i++)

{

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

}

function stopit()

{

clearTimeout(progressTimer);

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

}

function linkto(){

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

progress_update();

}

</script>

</head>

<body>

<br/>

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

</td></tr>

</table>

</div>

</body>

</html>

效果图如下：

会员力量，点亮园子希望

刷新页面返回顶部

机会是个小姑娘，需要我们主动点

公告

改进后的进度条