请问用Javascript怎样实现一个进度条?

<HTML>
<HEAD>
<SCRIPT>
function ProgressBar (styles) {
  this.id = ProgressBar.cnt;
  ProgressBar.bars[ProgressBar.cnt++] = this;
  if (!styles)
    styles = {};
  var df = ProgressBar.defaults;
  for (var p in df)
    this[p] = styles[p] ? styles[p] : df[p];
  this.writeHTML();
}
function ProgressBar_writeHTML () {
  this.layerID = 'Bar' + this.id;
  var html = '';
  if (document.all) {
    html += '<SPAN';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';'
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid'
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' position: absolute;';
    html += ' width: 100%; height: 100%;';
    html += ' background-color: ' + this.color + ';';
    html += ' clip: rect(0px, 0px, auto, 0px)';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/SPAN>';
  }
  else if (document.layers) {
    this.fullWidth = this.width + 2 * this.borderWidth;
    this.fullHeight = this.height + 2 * this.borderWidth;
    html += '<STYLE>';
    html += '#' + this.layerID + ' {';
    if (this.position == 'none')
      html += ' position: relative;'
    else
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + 'px;'
        + ' top: ' + this.top + 'px;';
    html += ' width: ' + (this.fullWidth) + 'px;';
    html += ' height: ' + (this.fullHeight) + 'px;';
    html += ' clip: rect(0 ' + this.fullWidth + ' '
      + this.fullHeight + ' 0);';
    html += ' layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#B' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' width: ' + this.fullWidth + 'px;';
    html += ' height: ' + this.fullHeight + 'px;';
    html += ' clip: rect(0, ' + this.fullWidth + ', '  +
this.fullHeight + ', 0);';
    html += 'layer-background-color: ' + this.borderColor + ';';
    html += '}';
    html += '#I' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, ' + this.width + ', ' + this.height
+ ', 0);';
    html += 'layer-background-color: ' + this.backgroundColor + ';';
    html += '}';
    html += '#P' + this.layerID + ' {';
    html += ' position: absolute;';
    html += ' left: ' + this.borderWidth + 'px;';
    html += ' top: ' + this.borderWidth + 'px;';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' clip: rect(0, 0, ' + this.height + ', 0);';
    html += 'layer-background-color: ' + this.color + ';';
    html += '}';
    html += '<\/STYLE>';
    html += '<SPAN ID="' + this.layerID + '">';
    html += '<DIV ID="B' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="I' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<DIV ID="P' + this.layerID + '">';
    html += '<\/DIV>';
    html += '<\/SPAN>';
  }
  else if (document.getElementById) {
    html += '<DIV';
    html += ' ID="' + this.layerID + '"';
    html += ' STYLE="';
    if (this.position != 'none')
      html += ' position: ' + this.position + ';'
        + ' left: ' + this.left + ';'
        + ' top: ' + this.top + ';';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.backgroundColor + ';';
    html += ' border: ' + this.borderWidth + 'px solid'
      + ' ' + this.borderColor + ';';
    html += '"';
    html += '>';
    html += '<DIV ID="P' + this.layerID + '"';
    html += ' STYLE="';
    html += ' width: ' + this.width + 'px;';
    html += ' height: ' + this.height + 'px;';
    html += ' background-color: ' + this.color + ';';
    html += ' clip: rect(0px, ' + this.width + 'px, auto, 0px);';
    html += ' overflow: hidden;';
    html += '"';
    html += '>';
    html += '<\/DIV>';
    html += '<\/DIV>';
  }
  document.write(html);
}
ProgressBar.prototype.writeHTML = ProgressBar_writeHTML;
function ProgressBar_progressTo (percentage) {
  if (document.all) {
    if (!this.pbar)
      this.pbar = document.all['P' + this.layerID];
    this.pbar.style.clip =
      'rect(0px, '
      + Math.floor(percentage * this.width) + 'px,'
      + ' auto, 0px)';
  }
  else if (document.getElementById) {
    if (!this.pbar)
      this.pbar = document.getElementById('P' + this.layerID);
    this.pbar.style.clip =
      'rect(0px, '
      + Math.floor(this.width - percentage * this.width) + 'px'
      + ', auto, 0px)';
  }
  else if (document.layers) {
    if (!this.pbar)
      this.pbar = document[this.layerID].document['P' + this.layerID];
    this.pbar.clip.width = Math.round(percentage * this.width);
  }
}
function ProgressBar_hide () {
  if (document.layers)
    document[this.layerID].visibility = 'hide';
  else if (document.all)
    document.all[this.layerID].style.visibility = 'hidden';
  else if (document.getElementById)
    document.getElementById(this.layerID).style.visibility =
      'hidden';
}
ProgressBar.prototype.hide = ProgressBar_hide;
ProgressBar.prototype.progressTo = ProgressBar_progressTo;
ProgressBar.defaults = {
  position: 'none',
  left: 0,
  top: 0,
  width: 200,
  height: 25,
  borderColor: 'black',
  borderWidth: 1,
  backgroundColor: 'blue',
  color: 'lime'
}
ProgressBar.cnt = 0;
ProgressBar.bars = new Array();</SCRIPT>
<SCRIPT>
var pb;
var c = 0;
function progressDemo () {
  pb.progressTo (c);
  c += 0.1;
  if (c <= 1)
    setTimeout('progressDemo()', 200);
    else
    window.location="http://colorweb.go.163.com"
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="progressDemo();">
Progress Bar Demo:
<SCRIPT>
pb = new ProgressBar ();
</SCRIPT>
<BR>
</BODY>
</HTML>

也可以参见：
http://lucky.myrice.com/main.htm

也可以参见：
http://lucky.myrice.com/main.html

so easy，用script控制表格的TD的WIDTH

做一个进度条图片，用settimeout（）动态显示图片的width。

哪还不如定义一个表格莱得快,<table><tbody><td></tbody></table>控制宽度

调试易

请问用Javascript怎样实现一个进度条?

解决方案 »