页面中加入进度条

<INPUT type="button" value="加载" onclick="show();">

<div id="loadDiaplay" style='margin-top:40;margin-left:40;margin-right:0;display:none;'> 
<style>
  <!--
  .proccess{border:0px solid; border-color:#009900; width:2;height:15;background:eeeeee;margin:0}
  -->
</style> 
</p> 
<div style='margin-top:-20;margin-left:0;margin-right:0;' align="center"> 
<form method=post name=proccess> 
<script language=javascript> 
  document.write("<br><br><br><br>");
  document.write("<table id='jindutiao' border=0 cellspacing=1 cellpadding=0 bgcolor=#000000 >") ;
  document.write("<tr bgcolor=#ffffff><td style='font:9pt Verdana;'>");
  for(i=0;i<200;i++)
  {
    document.write("<input class=proccess >"); 
  }
  document.write("</td></tr></table><br>"); 
  document.write("<div id='jindutishi' align=center style='font-size:12pt;color:#660000;'> 加载中......</div>");
</script> 
<script language=JavaScript>
  <!-- 
  var p=0,j=0; 
  var c=new Array("#FF6600","#ffffff") ;
  //setInterval('proccess();',20) ;
  function proccess()
  {
  	document.forms.proccess.elements[p].style.background=c[j]; 
  	p+=1; 
  	if(p==200)
  	{
  		//alert("加载完成。");
  		document.getElementById("jindutiao").style.display="none";
  		document.getElementById("jindutishi").innerHTML="加载完成！";
  		setTimeout("undisplayjdt()",1000);
  	}
  } 
  function undisplayjdt()
  {
    document.getElementById("loadDiaplay").style.display="none";
  }
-->
</script> 
</form>
</div> 
</div> 


<script language=JavaScript>
  function show()
  {
    document.getElementById("loadDiaplay").style.display = "block";
    setInterval('proccess();',20);
  }
</script>