网页或文件加载Loading进度条效果之一

最新推荐文章于 2021-03-12 06:11:25 发布

原创最新推荐文章于 2021-03-12 06:11:25 发布 · 863 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #border #table #ie #c

本文介绍了一种网页或文件加载时显示的Loading进度条效果实现方法。通过HTML和JavaScript技术，该进度条能够动态展示加载进度，并且具备美观的视觉效果。

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---网页或文件加载Loading进度条效果之二</title>

<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>.WndFocus {
BACKGROUND-COLOR: #31309c; COLOR: #ffffff; CURSOR: default; HEIGHT: 20px; MARGIN: 1px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px
}
.FrameWnd {
BACKGROUND-COLOR: #d6d3ce; BORDER-BOTTOM: #ffffff 2px outset; BORDER-LEFT: #ffffff 2px outset; BORDER-RIGHT: #ffffff 2px outset; BORDER-TOP: #ffffff 2px outset; FONT-FAMILY: Verdana; FONT-SIZE: 10pt
}
.winslogo {
BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #00659c 5px solid; BORDER-LEFT: #00659c 5px solid; BORDER-RIGHT: #0099ff 5px solid; BORDER-TOP: #0099ff 5px solid
}
.body {
BACKGROUND-COLOR: #396da5; FONT-FAMILY: Verdana; FONT-SIZE: 10pt
}
</STYLE>

</HEAD>
<BODY class=body align="center">

<TABLE border=0 cellPadding=0 cellSpacing=0 class=FrameWnd height=154
style="POSITION: absolute" width=404>
<TBODY>
<TR>
    <TD class=WndFocus height=18 id=title width=388>Loading...</TD></TR>
<TR>
    <TD bgColor=#ffffff height=61 width=388>
      <DIV class=winslogo
      style="HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 45px; WIDTH: 30px"></DIV>
      <DIV class=winslogo
      style="HEIGHT: 25px; LEFT: 70px; POSITION: absolute; TOP: 30px; WIDTH: 25px"></DIV>
      <DIV class=winslogo
      style="HEIGHT: 35px; LEFT: 50px; POSITION: absolute; TOP: 45px; WIDTH: 35px"></DIV>
      <DIV class=winslogo
      style="HEIGHT: 40px; LEFT: 20px; POSITION: absolute; TOP: 25px; WIDTH: 40px"></DIV>
      <DIV style="LEFT: 320px; POSITION: absolute; TOP: 30px"><B></B></DIV>
      <DIV align=right><B><IMG alt=IE6.00.123 height=95
      src="Images/intel.gif" width=235>    </B>
    </DIV></TD></TR>
<TR>
    <TD height=63 width=404>
      <FIELDSET>
      <LEGEND>系统信息</LEGEND>  版本：1.00.2012版<BR>  http://linkweb.cn/js</FIELDSET> </TD></TR>
<TR>
    <TD height=12 width=404>
      <SCRIPT language=jscript>
elt="0123456789ABCDEF";
var sTBHTMLS="";
var sTBHTMLE="";
for(var i=0;i<0xFF-0x99;i+=2)
{
   var cr="";
   var l;
   var sTBHTML="";
   l=i+0x99;
   for(var j=0;j<2;j++)
   {
    var n=l % 16;
    l=l >> 4;
    cr=elt.charAt(n)+cr;
   }
   l=i+0x33;
   for(var j=0;j<2;j++)
   {
    var n=l % 16;
    l=l >> 4;
    cr=elt.charAt(n)+cr;
   }
   l=i;
   for(var j=0;j<2;j++)
   {
    var n=l % 16;
    l=l >> 4;
    cr=elt.charAt(n)+cr;
   }
   var w=i>(0xFF-0xA0)?8:4
   sTBHTML="<span style='height:4;width:"+w+";background-color:#"+cr+";margin:0;padding:0'></span>"
   sTBHTMLS+=sTBHTML;
   sTBHTMLE=sTBHTML+sTBHTMLE;
}
var sTBHTML=sTBHTMLS+sTBHTMLE;
document.write("<marquee scrollamount='12' direction='right' scrolldelay='1' height='4' style='width:100%;height:4; font-size:6px;background-color:#003399'>")
document.write(sTBHTML)
document.write("</marquee>")
</SCRIPT>
    </TD>
<TR>
    <TD height=27 width=404>  ©Dxxxxx Corporation
1999-3000</TD></TR></TBODY></TABLE></FORM></BODY></HTML>