js 进度条代码

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 1k 阅读

文章标签：

#function #javascript #div #layer #html

JAVA/JAVA SCRIPT 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现网页加载动画和进度条，包括使用定时器、透明度、位置属性来动态调整加载状态，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<title>loading</title>
</head>
<style>

</style>

<script   language="JavaScript1.2">

var   duration=5

function   postaction(){

document.all.baranchor.style.visibility="hidden"
document.all.percent.style.visibility="hidden"
document.location.href="http://www.tom.com"
}



var   clipright=0
var   widthIE=0
var   widthNS=0

function   initializebar(){
if   (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if   (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function   increaseIE(){
bar.style.clip="rect(0   "+clipright+"   auto   0)"
window.status="Loading..."
if   (clipright<widthIE)
{
clipright=clipright+(widthIE/(duration*20));
document.all.percent.innerHTML="<center><font   color=red>"+clipright/2   +   "%</font></center>"
}
else{
window.status='成功登入'
clearInterval(startIE)
postaction()
}
}

function   increaseNS(){
if   (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}


window.onload=initializebar
</script>
<body>
<script   language="JavaScript1.2">

if   (document.all){
document.write('<div   id="baranchor"   style="position:relative;width:200px;height:20px;visibility:hidden;left:300;top:150;">')
document.write('<div   id="barbackground"   style="width:200px;height:20px;z-index:9"></div>')
document.write('<div   id="bar"   style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
document.write('<div   id="percent"   style="position:relative;width:200px;height:20px;visibility:visible;left:390;top:150"></div>')
}

</script>
<ilayer   name="baranchorNS"   visibility="hide"   width=200   height=20>
<layer   name="barbackgroundNS"   bgcolor=black   width=200   height=20   z-index=10   left=0   top=0></layer>
<layer   name="barNS"   bgcolor=blue   width=200   height=20   z-index=11   left=0   top=0></layer>
</ilayer>
</body>
</html>