|
代码开始（此行不用复制）
<head>
<title>CSS+JS制作的进度条</title>
<style>
.divbody
{
z-index: 2;
left: 2%;
visibility: hidden;
width: 98%;
cursor: crosshair;
position: absolute;
top: 40px;
height: 96%;
background-color: #ffffcc;
}
p
{
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>
<script type="text/javascript">
//设置span元素的编号
var progressEnd = 16;
//设置进度条的颜色为蓝色
var progressColor = "blue";
//设置进度条的走动时间--毫秒为单位
var progressInterval = 350;
//进度条的开始标志
var progressBegin = 0;
var progressTimer;
function progress_clear()
{
//清空定时器
clearTimeout(progressTimer);
//隐藏div
document.getElementById("framediv").style.visibility="hidden";
}
function progress_update()
{
progressBegin++;
//如果开始标志已经大于结束标志
if (progressBegin > progressEnd)
progress_clear();//清空进度条
else
//否则继续更新进度条
document.getElementById("progress"+progressBegin).style.backgroundColor = progressColor;
//在一定的时间间隔内循环更新进度条
progressTimer = setTimeout("progress_update()",progressInterval);
}
function linkto()
{
//显示div
document.getElementById("framediv").style.visibility="visible";
//调用更新进度条的方法
progress_update();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="btn1" type="button" onclick="linkto()" value="连接" />
<div id="framediv" class="divbody" >
<br />
<p>正在连接站点，请稍候...</p>
<table align="center">
<tr> <td>
<div class="divprogress"><span id="progress1"> </span>
<span id="progress2"> </span> <span id="progress3"> </span>
<span id="progress4"> </span> <span id="progress5"> </span>
<span id="progress6"> </span> <span id="progress7"> </span>
<span id="progress8"> </span> <span id="progress9"> </span>
<span id="progress10"> </span> <span id="progress11"> </span>
<span id="progress12"> </span> <span id="progress13"> </span>
<span id="progress14"> </span><span id="progress15"> </span>
<span id="progress16"> </span>
</div>
</td> </tr>
</table>
</div>
</form>
</body>
</html>
代码结束（此行不用复制） |
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
站长QQ：