Home > Developer > JavaScript
Method 1:
Loading. js
Copy codeThe Code is as follows:
// Frequency
Var frequency = 50;
// Step size
Var step = 3;
// Background color
Var loadingBgcolor = "# ffffff ";
// Width
Var loadingWidth = 354;
/*
* Parameter description:
* Content: the displayed content. It can be blank;
* ImageURL: set the path of the referenced JS file;
* Left: the position where the progress bar is displayed. left
* Top: top of the display position on the progress bar
*/
Function Loading (content, imageURL, left, top)
{
ImageURL = imageURL + "Loading.jpg ";
LoadTable (content, imageURL, left, top );
Showimage. style. display = "";
Window. setInterval ("RefAct ();", frequency );
}
Function RefAct ()
{
ImgAct. width + = step;
If (imgAct. width> loadingWidth-4)
{
ImgAct. width = 0;
}
}
Function LoadTable (content, imageURL, left, top)
{
Var strLoading;
StrLoading = "";
StrLoading + = "<div id = \" showimage \ "style = \" DISPLAY: none; Z-INDEX: 100; LEFT: "+ left +" px; POSITION: absolute; TOP: "+ top +" px; \ "align = \" center \ "> ";
StrLoading + = "<TABLE id = \" Table1 \ "cellSpacing = \" 0 \ "cellPadding = \" 0 \ "width = \" "+ loadingWidth +" \ "border = \ "0 \" bgcolor = \ "" + loadingBgcolor + "\"> ";
If (content! = "")
{
StrLoading + = "<tr> ";
StrLoading + = "<td align = \" center \ "> ";
StrLoading + = "<font size = \" 4 \ "face = \" Courier New, Courier, mono \ "> <strong>" + content + "</strong> </font> ";
StrLoading + = "</td> ";
StrLoading + = "</tr> ";
StrLoading + = "<TR> ";
}
StrLoading + = "<TD class = \" Loading \ "height = \" 8 \ "> ";
StrLoading + = " ";
StrLoading + = "</TD> ";
StrLoading + = "</TR> ";
StrLoading + = "</TABLE> ";
StrLoading + = "</div> ";
Document. getElementById ("loading_div"). innerHTML = strLoading;
}
Usage page:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> Untitled Document </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Script src = "LoadingJS/Loading. js" type = "text/javascript"> </script>
</Head>
<Body>
<Input type = "button" name = "Button" value = "Button" onclick = "Loading ('show tag content', 'loadingjs/', 20,100)">
<Div id = "loading_div"> </div>
</Body>
</Html>
Method 2:
JS to display progress
Copy codeThe Code is as follows:
Progress. js files:
$ = Function (id ){
Return document. getElementById (id );
}
// Convert text to JSON string
String. prototype. toJson = function (){
If (this = ){
Return null;
}
Else {
Try {
Return eval (+ this. replace (/rn/g, rn) + ));
}
Catch (err ){
}
}
};
// Character formatting Method
String. prototype. format = function (){
Var newStr = this;
Var reg = null;
For (var I = 0; I <arguments. length; I ++ ){
Reg = RegExp ('{' + (I) + '}', 'G ');
NewStr = newStr. replace (reg, arguments [I]);
}
Return newStr;
};
// Progress bar
Function Progress (objId ){
// Window. setInterval object
This. interval = null;
// Progress bar Object ID
This. id = objId;
// The start progress of the current progress is 0.
This. progress = 0;
// Div id of the progress bar
This. progressId = inner + this. id;
// Progress bar border ID
This. progressFrameId = frame + this. id;
// Progress bar parameter configuration
This. config = {
// Width
Width: 150,
// Height
Height: 20,
// Left margin
Left: 0,
// Top margin
Top: 0,
// Progress color
ProgressColor: red,
// Border color
BorderColor: # ccc,
// Border Width
BorderHeight: 2,
// Hide the progress bar after N seconds after the progress is completed. 0 indicates hide now.
HiddenSplit: 2000
};
}
// Progress bar class initialization method
Progress. prototype. init = function (){
// Create a progress bar DIV
Var progressdiv = document. createElement (div );
// Border DIV Style
Var progressdiv_css_text = position: absolute; width: {0} px; height: {1} px; left: {2} px; top: {3} px; border: {4} {5} px solid ;. format
(
This. config. width,
This. config. height,
This. config. left,
This. config. top,
This. config. borderColor,
This. config. borderHeight
);
// The reset progress is 0.
This. progress = 0;
// Set the border ID
Progressdiv. id = this. progressFrameId;
// Set the border Style
Progressdiv.style.css Text = progressdiv_css_text;
// Set the progress bar HTML
Progressdiv. innerHTML ='
'. Format (this. progressId, this. config. height, this. config. progressColor );
// Add to body
Document. body. appendChild (progressdiv );
};
// Progress bar hiding Function
Progress. prototype. hiddenProgress = function (){
Document. body. removeChild (document. getElementById (this. progressFrameId ));
Window. clearInterval (this. interval );
}
// Function triggered when the progress ends
Progress. prototype. complete = function (){
Window. clearInterval (this. interval );
This. interval = window. setTimeout (this. id +. hiddenProgress ();, this. config. hiddenSplit );
If (this. completeCallBack ){
This. completeCallBack ();
}
}
// Progress the callback function after each running
Progress. prototype. callback = function (){
Var progressDiv = document. getElementById (this. progressId );
Var progressFrameDiv = document. getElementById (this. progressFrameId );
ProgressDiv. innerHTML = (this. progress SS * 100) + %;
ProgressFrameDiv. title = upload progress: + (this. progress * 100) + %;
ProgressDiv. style. width = (this. progress SS * 100) + %;
If (this. progress> = 1 ){
This. complete ();
ProgressDiv. innerHTML = File Uploaded successfully !;
}
}
// Progress bar to run the function. Implemented by the user
Progress. prototype. run = function (){
Alert (Please implement the + this. id +. run method to Implement Asynchronous progress requests and send back the request callback + this. id +. callback method .);
Window. clearInterval (this. interval );
}
// Start progress
Progress. prototype. start = function (){
This. init ();
This. interval = window. setInterval (this. id +. run (), 1000 );
}
Real-time display of image loading progress
Copy codeThe Code is as follows:
<Script>
Var l = 0;
Var imgs;
Var sum = 0;
Var imgs = new Array ();
Function chk (){
L --;
Document. getElementById ("aa"). innerText = "" + (sum-l) * 100/sum) + "%"
If (l = 0 ){
For (var I = 0; I <sum; I ++)
Document. body. innerHTML + = "}
}
If (document. images ){
Imgs [0] = new Image ()
Imgs [1] = new Image ()
Imgs [2] = new Image ()
Imgs [3] = new Image ()
Imgs [4] = new Image ()
Imgs [5] = new Image ()
Imgs [6] = new Image ()
Imgs [7] = new Image ()
Imgs [0]. src = "/articleimg/2006/08/3859/01 .jpg ";
Imgs [1]. src = "/articleimg/2006/08/3859/02 .jpg ";
Imgs [2]. src = "/articleimg/2006/08/3859/03 .jpg ";
Imgs [3]. src = "/articleimg/2006/08/3859/04 .jpg ";
Imgs [4]. src = "/articleimg/2006/08/3859/05 .jpg ";
Imgs [5]. src = "/articleimg/2006/08/3859/06 .jpg ";
Imgs [6]. src = "/articleimg/2006/08/3859/07 .jpg ";
Imgs [7]. src = "/articleimg/2006/08/3859/08 .jpg ";
}
</Script>
<Body>
<Div id = "aa" type = "option" text = "option"> 0% </div type = "option" text = "/option">
<Script>
Sum = l = imgs. length;
For (var I = 0; I <l; I ++ ){
Imgs [I]. onload = chk;
Imgs [I]. onerror = chk; // The specified method is executed no matter whether the image is loaded successfully or not.
}
</Script>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
