!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=gbk">
title>Flash DownLoad 下载控件示例/title>
meta name="MSSmartTagsPreventParsing" content="TRUE">
meta http-equiv="MSThemeCompatible" content="Yes">
style type="text/css">
body {
scrollbar-base-color: #F5FBFF;
scrollbar-arrow-color: #86B9D6;
font: 12px Tahoma, Verdana;
background-color: #FFFFFF;
color: #333333;
}
table {
font: 12px Tahoma, Verdana;
color: #333333;
empty-cells: show;
border-collapse: separate !important;
border-collapse: collapse;
}
input, select, textarea {
font: 12px Tahoma, Verdana;
color: #333333;
font-weight: normal;
background-color: #F5FBFF;
border: 1px solid #7AC4EA;
}
input {
height: 21px;
}
a {
text-decoration: none;
color: #154BA0;
}
a:hover {
text-decoration: underline;
}
.checkbox, .radio {
border: 0px;
background: none;
vertical-align: middle;
height: 16px;
}
/style>
/head>
BODY>
Script Language="JavaScript">
/********************************************************
* ProgressBar class
* @author null
* @param width - width of progress bar
* @param height - height of progress bar
* @param fgColor - fgColor of progress bar
* @param bgColor - bgColor of progress bar
* @param borderColor - borderColor of progress bar
          the rule is the same border-color of CSS
/********************************************************/
function ProgressBar(width,height,fgColor,bgColor,borderColor){

  if(borderColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }
  else if(borderColor==undefinedfgColor==undefinedbgColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }

  percent  = 0.0; //initialize to zero
  fontSize = Math.ceil(height/2)+1;

  font_bt = "table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'>tr>td>"+parseInt(percent*100)+" %/td>/tr>/table>";
  font_ft = "table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+fgColor+";text-align:center;vertical-align:center;'>tr>td>"+parseInt(percent*100)+" %/td>/tr>/table>";

  squares = "";
  for(var i=0;;i++){
    var left = width-2-i*(height/2+1);
    //alert(left);
    if(left>=height/2+1){
      squares += "span style='background-color:"+fgColor+";width:"+height/2+"px;height:"+(height-2)+";margin-right:1px;'>/span>";
    }
    else if(left>=1){
      squares += "span style='background-color:"+fgColor+";width:"+left+"px;height:"+(height-2)+";margin:0px;'>/span>";
    }
    else
      break;
  }

  //position:absolute;
  str  = "span id=progress_bg style='width:"+width+"px;height:"+height+"px;background-color:"+bgColor+";border:1px solid;border-color:"+borderColor+"'>"; //"+fgColor+" #transparent
  str += "  span id=progress_fg style='position:absolute;width:100%;height:100%;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);background-color:"+fgColor+";font-size:0px;line-height:0px;'>";
  str +=      squares;
  str += "  /span>";
  str += "  span id=progress_bt style='position:absolute;z-index:8;width:100%;height:100%;background-color:#transparent;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);text-align:center;'>";
  str +=      font_bt;
  str += "  /span>";
  str += "  span id=progress_ft style='position:absolute;z-index:9;width:100%;height:100%;background-color:#transparent;clip:rect(0,100%,100%,"+parseInt(percent*100)+"%);text-align:center;'>";
  str +=      font_ft;
  str += "  /span>";
  str += "/span>";

  document.write(str);