Home > Developer > JavaScript
Copy codeThe Code is as follows:
[Code]
<Script type = "text/javascript">
Var loading = {
Element: null,
Count: 0,
ID: 0,
CreateLoading: function (parent, width, height) {// used to generate a progress bar box for the periphery
Loading. element = document. createElement ("div ");
Loading. element. id = "loading ";
Loading. element. className = "loading ";
Loading. element. style. height = height;
Loading. element. style. backgroundColor = "# ffffff ";
Loading. element. style. border = "1px solid #333333 ";
Loading. element. style. width = width;
Parent. appendChild (loading. element );
Loading. interval ();
},
AddSubDIV: function () {// use setInterval to add the div label in the outer circle to achieve the progress.
// If the width of the outer circle is reached, the progress is displayed again.
If (loading. count + 1) * 2> = parseInt (loading. element. style. width )){
Loading. count = 0;
ClearInterval (loading. ID );
Loading. element. innerHTML = "";
Loading. interval ();
}
Else {
Var elem = document. createElement ("div ");
Elem. className = sub-loading;
Elem. style. backgroundColor = "# f00 ";
Elem. style. width = "2px ";
Elem. style. height = loading. element. style. height;
Elem. style. display = "inline ";
Loading. element. appendChild (elem );
Loading. count ++;
}
},
Interval: function () {// call repeatedly
Loading. ID = setInterval (loading. addSubDIV, 30 );
}
}
Onload = function (){
Loading. createLoading (document. getElementById ("parent"), "402px", "15px ");
}
</Script>
[/Code]
Run the Demo code:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> JavaScript Data Access Test </TITLE> <META http- equiv = Content-Type content = "text/html; charset = gb2312 "> <STYLE>. sub-loading {DISPLAY: inline} </STYLE> <META content = "MSHTML 6.00.6000.16850" name = GENERATOR> </HEAD> <BODY class = body> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
