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

biti_jack 2002-05-05 09:27:37

谢谢!

...全文

29 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

llrock 2002-05-20

打赏
举报

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

flylyke 2002-05-07

打赏
举报

good!

biti_jack 2002-05-06

打赏
举报

能大概解释一下上面程序的原理吗?谢谢!

good02xaut 2002-05-06

打赏
举报

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

blues-star 2002-05-06

打赏
举报

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

孟子E章 2002-05-05

打赏
举报

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

孟子E章 2002-05-05

打赏
举报

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

孟子E章 2002-05-05

打赏
举报

<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>

qisanyou 2002-05-05