会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
秋天叶落
每天进步一点,终将走上顶点
导航
博客园
首页
新随笔
联系
订阅
管理
公告
javascropt实现简单的进度条
Posted on
2007-05-24 15:49
秋天叶落
阅读(
699
) 评论(
1
)
编辑
收藏
举报
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.0 Transitional//EN
"
>
<
HTML
>
<
HEAD
>
<
TITLE
>
New Document
</
TITLE
>
<
style type
=
"
text/css
"
>
.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
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
>
<
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
"
>&
nbsp;
&
nbsp;
</
span
>
<
span id
=
"
progress2
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress3
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress4
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress5
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress6
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress7
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress8
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress9
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress10
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress11
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress12
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress13
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress14
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress15
"
>&
nbsp;
&
nbsp
</
span
>
<
span id
=
"
progress16
"
>&
nbsp;
&
nbsp
</
span
>
</
td
></
tr
>
</
table
>
</
div
>
</
BODY
>
</
HTML
>
会员力量,点亮园子希望
刷新页面
返回顶部
Powered by:
博客园
Copyright © 2024 秋天叶落
Powered by .NET 8.0 on Kubernetes