Copy codeThe Code is as follows: <PUBLIC: COMPONENT>
<PUBLIC: method name = "Init" INTERNALNAME = "fnCreateProgressBar"/>
<PUBLIC: method name = "showProgress" INTERNALNAME = "showProgress"/>
<PUBLIC: property name = "Container"/>
<PUBLIC: property name = "Speed"/>
<Script language = javascript>
Var startTime = null;
Function fnCreateProgressBar (){
Now = new Date ();
StartTime = now. getTime ();
Now = null
OContainer = element. Container
OContainer. innerHTML = "";
ODiv = uploaddoc ument. createElement ("DIV ")
ODiv. className = "progress"
OContainer. appendChild (oDiv)
ODiv. style. display = "";
Element. bar = oDiv;
}
Function pause (numberMillis ){
Var dialogScript =
'Window. setTimeout ('+
'Function () {window. close () ;}, '+ numberMillis + ');';
Var result =
Window. showModalDialog (
'Javascript: document. writeln ('+
'"<Script>' + dialogScript + '<' + '/script> ")');
}
Function showProgress (StatesDesc ){
Now = new Date ();
CurrTime = now. getTime ();
Now = null
If (StatesDesc! = Null) window. status = StatesDesc + "current time consumed:" + (currTime-startTime) + "millisecond! ";
Element. bar. style. width = (currTime-startTime)/element. Speed;
Pause (1)
}
</Script>
</PUBLIC: COMPONENT>
Example:Copy codeThe Code is as follows:
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> progress bar test </title>
<Link rel = "stylesheet" type = "text/css" href = "ProgressBar.css">
<Script>
Function Demo (){
PrgBar. Container = document. all. layer1
PrgBar. Init ();
For (var I = 0; I <500; I ++ ){
If (I % 5 = 0) PrgBar. showProgress ("operation in progress ......")
}
PrgBar. showProgress ("Operation completed! ")
}
</Script>
</Head>
<Body>
<Div style = "position: absolute; width: 612px; height: 19px; z-index: 1; left: 10px; top: 72px; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px "id =" layer1 "> </div>
<P> <input type = "button" value = "test" name = "B3" onclick = "Demo ()"> </p>
<Progressbar id = "PrgBar" class = "ProgressBar" Speed = "10"/>
</Body>
</Html>
Style File: ProgressBar.css
Copy codeThe Code is as follows:. ProgressBar
{
BEHAVIOR: url ("ProgressBar. htc ")
}
. Progress {
Position: relative;
Width: 0px;
Height: 20px;
Z-index: 1;
Background-color: #006699;
Filter: progid: DXImageTransform. Microsoft. gradient (startcolorstr = #006699, endcolorstr = # E3EFFF, gradientType = 0 );
Border: 1px ridge # C0C0C0;
}