Javascript实现loading的效果

网页加载动画实例

最新推荐文章于 2025-10-15 10:26:47 发布

转载最新推荐文章于 2025-10-15 10:26:47 发布 · 3.1k 阅读

文章标签：

#javascript #function #div #border #input #html

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文提供多个网页加载动画的实现案例，包括进度条、百分比显示及动态效果等，通过JavaScript和HTML结合使用来提升用户体验。

进入网页前显示一个Loading效果：

<HTML>
<BODY>
<P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P>
<table border="0" cellpadding="0" cellspacing="0" width="50%" align=center>
<tr>
<td width="51%" noWrap>
<p align="right"><FONT face=宋体 color=navy
size=2>正在加载：</FONT></p> </td>
<td width="4%" bordercolor="#000000">
<marquee align="middle" direction="right" scrolldelay="1" bgcolor="gainsboro" scrollamount="2" style="BORDER-RIGHT: black 1px outset; BORDER-TOP: black 1px outset; FONT-SIZE: xx-small; BORDER-LEFT: black 1px outset; WIDTH: 133px; COLOR: #000080; BORDER-BOTTOM: black 1px outset; HEIGHT: 13px"
behavior="slide">███████████████████████████████████████████████████████████████████████████████</marquee>
</td><td width="45%" align=left><div id=per></div></td></tr></table>
<SCRIPT>
var myTime=0
function counter(){
myTime++
per.innerHTML="<font size=2 color=darkblue> "+myTime+"%</font>"
if(myTime<100)
setTimeout("counter()",40);
else{
location.href="http://download.pchome.net"
}}
counter()
</SCRIPT>
</BODY>
</HTML>

<html>
<head>
<title>欢迎光临网易多广告站</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT type=text/javascript>

</SCRIPT>
</head>
<BODY onload="fakeProgress(0,sb)" topmargin=100 bgcolor="#999999">
<br><br><br><br><br><br><br><br>

<div align=center>
<DIV id=sb
style="BORDER-RIGHT: white 0px inset; BORDER-TOP: white 0px inset; BACKGROUND: #cccccc; BORDER-LEFT: white 0px inset; WIDTH: 200px; BORDER-BOTTOM: white 0px inset; HEIGHT: 20px; TEXT-ALIGN: left">
<DIV id=sbChild1
style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); WIDTH: 0%; POSITION: absolute; HEIGHT: 20px">
<DIV
style="FONT-SIZE: 1px;BACKGROUND:#ffffff; WIDTH: 100%; HEIGHT: 100%"></DIV></DIV>
<DIV
style="FONT-SIZE:11px; WIDTH: 100%; COLOR:#000000; FONT-FAMILY:verdana; POSITION: absolute; TEXT-ALIGN: center"></DIV></DIV>

<br>
<DIV id=infor
style=" FONT-SIZE:11px; WIDTH: 100%; COLOR:#000000; FONT-FAMILY:verdana; POSITION: relative; TEXT-ALIGN: center">
</DIV>
</div>
</BODY>
</html>

<html>
<head>
<style type="text/css">
td { font-size: 12px}
</style>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT type=text/javascript>
var ie5=(document.all && document.getElementsByTagName);
var step=0;
function setSB(v, el, inforEl, message) {
if (ie5 || document.readyState == "weicool") {
filterEl=el.children[0];
valueEl=el.children[1];
if (filterEl.style.pixelWidth > 0) {
var filterBackup=filterEl.style.filter;
filterEl.style.filter="";
filterEl.style.filter=filterBackup;}
filterEl.style.width=v + "%";
valueEl.innerText=v + "%";
inforEl.innerText=message;}}
function setSBByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "weicool") {
step=step + v;
filterEl=el.children[0];
valueEl=el.children[1];
if (filterEl.style.pixelWidth > 0) {
var filterBackup=filterEl.style.filter;
filterEl.style.filter="";
filterEl.style.filter=filterBackup;}
filterEl.style.width=step + "%";
valueEl.innerText=step + "%"
inforEl.innerText=message;}}
function fakeProgress(v, el) {
if (v >= 101)
location.href="http://www.333v.com";
else {
setSB(v, el, infor, " 网页加载中 ......");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 20)}}
</SCRIPT>
</head>
<BODY onload="fakeProgress(0,sb)" topmargin=100 bgcolor="#4678B0" link="#FF0000" vlink="#FF0000">
<p align="center">　<font size="6" color="#FFFFFF"><b>伟COOL网络</b></font>
<p align="center">　

<div align=center>
<DIV id=sb
style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #c0c0c0 1px solid; BACKGROUND: #4678B0; BORDER-LEFT: #fffffff 1px solid; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN:left">
<DIV id=sbChild1 style="FIlTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); WIDTH: 100%; POSITION: absolute; height:12px; overflow: hidden">
<DIV style="BACKGROUND:#000000; WIDTH: 100%";height:12px; overflow: hidden></DIV></DIV>
<DIV style="font-size: 10px; width: 403; color: white; font-family: arial; position: absolute; text-align: center; height: 14; left: 11; top: 210">　</DIV>
</DIV>
<DIV id=infor style="font-size: 11px; width: 402; color: #999999; font-family: arial; position: relative; text-align: center; height: 19">
</DIV>
</div>
<p align="center">　</p>
<p align="center">　</p>
<p align="right">　</p>
<p align="right"><font color="#FF0000"><a href="http://www.333v.com"><b>进入主页&gt;&gt;&gt;</b></a></font></p>
</BODY>
</html>

<body style="background:black">
<div style="position:absolute;width:322;height:14;border:1 #707888 solid;overflow:hidden">
<div style="position:absolute;top:-1;left:0" id="pimg">
</div>
</div>
<div style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4" id="abc">
Loading.............
</div>
<script>
s=new Array();
s[0]="#050626";
s[1]="#0a0b44";
s[2]="#0f1165";
s[3]="#1a1d95";
s[4]="#1c1fa7";
s[5]="#1c20c8";
s[6]="#060cff";
s[7]="#2963f8";
function ls(){
pimg.innerHTML="";
for(i=0;i<9;i++){
pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";
}
}
function rs(){
pimg.innerHTML="";
for(i=9;i>-1;i--){
pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";
}
}
ls();
var g=0;sped=0;
function str(){
if(pimg.style.pixelLeft<350&&g==0){
if(sped==0){
ls();
sped=1;
}
pimg.style.pixelLeft+=4;
setTimeout("str()",1);
return;
}
g=1;
if(pimg.style.pixelLeft>-200&&g==1){
if(sped==1){
rs();
sped=0;
}
pimg.style.pixelLeft-=4;
setTimeout("str()",1);
return;
}
g=0;
str();
}
function flashs(){
if(abc.style.color=="#ffffff"){
abc.style.color="#707888";
setTimeout('flashs()',500);
}
else{
abc.style.color="#ffffff";
setTimeout('flashs()',500);
}
}
flashs();
str();
</script>

<SCRIPT>cnease=window.open("","etangWHSAD","top=2000");cnease.close();
focus()
self.resizeTo(800,600)
self.moveTo(-3,-3)</SCRIPT>
<html>
<head>
<title>一千经典特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
td,form,select,input,textarea,body  {font-family: 宋体;font-color:#000000;font-size: 12px;line-height:150%;letter-spacing:2px}
a:link { font-size: 9pt; text-decoration: none; color: #666666}
a:visited {  font-size:9pt; text-decoration: none; color: #666666}
a:hover {  text-decoration: none; font-size: 9pt; color: #666666}
a:active {  font-size: 9px; text-decoration: none; color: #666666}
</style>
<script>
var url='../4/11.htm';
</script>
</head>
<body onLoad="location.href=url;" style='overflow:hidden;overflow-y:hidden'>
<div align=center>
<table height=70% valign=middle align=center>
<tr>
<td align="center" disabled>

<div align="center">一千经典特效</div>
<p></p>
<font class=fontbig>页面读取中，请等待......<br>
</font>
<p></p><p></p>
<style></style>
<p></p><p></p>
<div align="center">
<form method=post name=proccess>
<script language=javascript>
for(i=0;i<30;i++)document.write("<input class=proccess>")
</script>
</form>
</div></td></tr></table>
<div align="center">
<script language=JavaScript>var p=0,j=0;
var c=new Array("lightskyblue","white")
setInterval('proccess();',100)
function proccess(){
document.forms.proccess.elements[p].style.background=c[j];
p+=1;
if(p==30){p=0;j=1-j;}}
--></script>
</div>
</div>
<div align="center">
<script>

</script>
</div>

<html><head><title>网页欣赏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=12)"><style>
body,td{font-size:12px;color:#FFFF00;text-align:center}</style>
</head><body bgColor="#32A348" text="#000000" scroll=no leftmargin="0" topmargin="0">
<script>l=Array(6,7,8,9,'a','b','b','c','d','e','f')
U="82.htm" //网址
Pic="../3/2/1000.jpg" //图片
Nx=5;Ny=35
t="<table height=95% cellspacing=0 cellpadding=0><tr><td><tr>"
for(x=Nx;x<Nx+Ny;x++)t+="<td width=20 id=a_mo"+x+">　</td>"
t+="</tr><tr><td width=20 id=a_mo"+(Nx-1)+">　</td><td colspan="+(Ny-2)+" rowspan="+(Nx)+">"+
"正在载入，请稍候.......<div align=left style=/"border:black 1px solid;width:401px/">"+
"<img src=../3/"+Pic+" height=22 id=chart width=0></div><div id=percent></div>"+
"<a href="+U+"><font color=#808080>进入</font></a></td><td width=20 id=a_mo"+(Nx+Ny)+">　</td></tr>"
for(x=2;x<=Nx;x++)t+="<tr><td width=20 id=a_mo"+(Nx-x)+">　</td><td width=20 id=a_mo"+(Ny+Nx+x-1)+">　</td></tr>"
t+="<tr>"
for(x=Ny;x>0;x--)t+="<td width=20 id=a_mo"+(x+Nx*2+Ny-1)+">　</td>"
document.write(t+"</tr></td></tr></table>")
var N=Nx*2+Ny*2
function f1(y){for(i=0;i<N;i++){c=(i+y)%20;if(c>10)c=20-c
document.all["a_mo"+(i)].bgColor="'#00"+l[c]+l[c]+"00'"}y++
setTimeout('f1('+y+')',50)}f1(1)
a_mo=0
function count(){a_mo++
chart.width=4*a_mo
percent.innerText=a_mo+"%"
if(a_mo<100)setTimeout("count()",50)
else window.location=U}count()
document.write("<iframe width=98% height=1 src=../3/"+U+"></iframe>")</script></body></html>