谁能用javascript写个进度条，并且让进度条在指定时间范围内(20秒)由零刻度逐渐增至满刻度？

<table border=0 cellpadding=0 width=200><tr><td width="0" height=20 id=m bgcolor=red></td>
<td width="200" id=n><img src="1px.gif" width="1"></td>
</table>
<script>var i=0</script>
<input type=button value=test onclick='this.disabled=true;setInterval("m.style.width=i;n.style.width=200-i;i++",1000)'>

解决方案 »

  1.   

    //Microsoft ProcessBar version 6.0
    <OBJECT id=ProgressBar1 style="LEFT: 0px; TOP: 0px" height=20 width=300 classid="CLSID:35053A22-8589-11D1-B16A-00C0F0283628" VIEWASTEXT>
    <PARAM NAME="_ExtentX" VALUE="7938">
    <PARAM NAME="_ExtentY" VALUE="529">
    <PARAM NAME="_Version" VALUE="393216">
    <PARAM NAME="BorderStyle" VALUE="0">
    <PARAM NAME="Appearance" VALUE="1">
    <PARAM NAME="MousePointer" VALUE="0">
    <PARAM NAME="Enabled" VALUE="1">
    <PARAM NAME="OLEDropMode" VALUE="0">
    <PARAM NAME="Min" VALUE="0">
    <PARAM NAME="Max" VALUE="100">
    <PARAM NAME="Orientation" VALUE="0">
    <PARAM NAME="Scrolling" VALUE="0"></OBJECT>
    <script>
    function increase(i)
    {
    ProgressBar1.Value = i;
    if (i<100) setTimeout("increase("+(i+1)+")",200);
    }
    increase(0)
    </script>
      

  2.   

    用setTimeout的话可以用类似下面的代码：
    var t=0;
    setTimeout("func1()",1000);
    function func1(){
    //这里放置增加进度条的代码
    t=t+1;
    if (t<20)setTimeout("func1()",1000);
    }用setInterval的话可以这样：
    var h=setInterval("func1()",1000);
    function func1(){
    //这里放置增加进度条的代码
    t=t+1;
    if (t>20)clearInterval(h);
    }
      

  3.   

    <TABLE bgcolor="black" width="110">
    <TR bgcolor="white">
    <TD><TABLE id=prc width=1 bgcolor=red><TR><TD></TD></TR></TABLE></TD>
    </TR>
    </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var cur=0;
    setTimeout("go()",1000);
    function go(){
    if (prc.width<110)
    {
    cur+=5;
    setTimeout("go()",1000);
    }
    prc.width=cur;
    }
    //-->
    </SCRIPT>
      

  4.   

    <div id=loading style="width:0;height:15;background:red">&nbsp;</div>
    <a id=a1></a>
    <script>
    change();
    function change(){
    loading.style.width=parseInt(loading.style.width)+5;
    a1.innerHTML=parseInt(loading.style.width)/5+" Second(s)."
    if(parseInt(loading.style.width)>=100)
    clearTimeout(aa)
    else
    aa=setTimeout("change()",1000)
    }
    </script>
      

  5.   

    <HTML>
    <HEAD>
    <TITLE>进度条</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY BGCOLOR="#FFFFFF" onload="loading()">
    <FORM name=load>
    <div align="center"><font color="#993399">网页下载中......</font>
    <INPUT TYPE="text" NAME="text1" size=50 style="font-family:arial;font-weight:border;color:#0066ff;backgroud-color:white;padding:0px;border-style:none;">
    <br>
    <INPUT TYPE="text" NAME="text2" size=4 style="color:#0066ff;text-align:center;border-width:medium;border-style:none;">
    <SCRIPT LANGUAGE="JavaScript">
    var num=2;
    var process="||"
    function loading(){
    num=num+2;
    process=process+"||"
    document.load.text1.value=process
    document.load.text2.value=num+"%"
    if(num<100){
    setTimeout("loading()","50")
    }
    else{
    window.location="http://www.xxx.com"
    }
    }
    </SCRIPT>
    </div>
    </FORM>
    </BODY>
    </HTML>
      

  6.   

    http://www.chinatools.biz:9009/flashbook/index.html
      

  7.   

    <div width="200" style="border:solid 1.5pt;border-color:#000000 #c6c6c6 #c6c6c6 #000000">
    <span id="go" style="text-align:center;color:#ffffff;background-color:#0000ff;width:0%">0%</span>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    var i=0;
    function go(n){ //n為需几秒完成
    if (i<100){
    i+=1;
    setTimeout("go("+n+")",n*10);
    }
    document.all('go').style.width=i+'%'
    document.all('go').innerText=i+'%'
    }
    go(5)
    </SCRIPT>
      

  8.   

    这个进度条应该可以满足要求了<!DOCTYPE HTML PUBLIC "-//W3C//Dspan width=5 height=10 HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>Time Behavior</TITLE>
    <XML:NAMESPACE PREFIX="t"/>
    <STYLE>
    .time            { behavior: url(#default#time);}
    </STYLE>
    </HEAD>
    <BODY>
    <TABLE><TR>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    for(var i=1;i<21;i++){
    document.write("<td class=time bgcolor=red width=5 height=10 t:BEGIN=\""+i+"\" t:DUR=\"indefinite\" t:TIMEACTION=\"display\"></td>");
    }//-->
    </SCRIPT>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
      

  9.   

    上面用的什么语法，我怎么从来没见过，用到了行为组件，但｛behavior: url(#default#time);}是什么意思？怎么还有xml和命名空间？看不懂。
      

  10.   

    <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">
    <table height=95%><tr><td>正在载入，请稍候.......
    <p align=left style="border:black 1px solid;width:401px">
    <img src=http://www.1000script.com/images/loading.gif  height=23 id=chart width=0></p>
    <div id=percent></div><a href=# onclick='location=U'><font color=#808080>GoTo</font></a></td></tr></table>
    <script>
    U="http://www.1000script.com " //网址
    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="+U+"></iframe>")</script><script language=javascript>document.title=' 1000script.com 专业脚本库 '+document.title</script>