Home > Developer > JavaScript
Javascript to implement a simple progress bar
This article will share with you two simple progress bars for javascript implementation, one for personal production and the other for implementation by netizens. They are all very good and we recommend them to you here.
Example 1:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<! Doctype html> <Html> <Head> <Meta charset = "utf8"> <Title> Process Bar </title> <Script> Var t;
Function s (c) { If (c <= 100) { Val. style. width = c + "% "; Percent. innerHTML = c + "% "; Btn. disabled = true; Btnp. disabled = false; C = c + 10; T = setTimeout ("s (" + c + ")", 500 ); } Else { ClearTimeout (t ); Btnc. disabled = false; Btnp. disabled = true; Return; } }
Function c () { ClearTimeout (t ); Val. style. width = "0px "; Percent. innerHTML = "0% "; Btn. disabled = false; Btnc. disabled = true; Btnp. disabled = true; Btnp. value = 'pause '; }
Function p () { Var temp; If ('pause' = btnp. value) { ClearTimeout (t ); Btnp. value = 'go on '; Btnc. disabled = false; } Else { Temp = val. style. width; Btnp. value = 'pause '; Var k = parseInt (delEnd (temp )); S (k ); Btnc. disabled = true; } }
Function delEnd (str) { Var temp = ""; For (var I = 0; I <str. length-1; I ++)
{ Temp = temp + str [I]; }
Return temp;
} </Script> </Head>
<Body> <Div id = "bar" style = "width: 300px; height: 30px; border: solid 1px; float: left;"> <Div id = "val" style = "height: 100%; background-color: # 03F; width: 0px;"> </div> </Div> <Div id = "percent" style = "float: left; line-height: 30px;"> 0% </div> <Div style = "clear: both"> </div> <Br/> <Input id = "btn" type = "button" value = "Start" onClick = "s (0)"/> <Br/> <Input id = "btnc" type = "button" value = "Clear" onClick = "c ()" disabled/> <Br/> <Input id = "btnp" type = "button" value = "Pause" onClick = "p ()" disabled/> </Body> </Html> |
Let's share a. net
Create a WEB project, add a new project> HTML page, and name it progressbar.htm. The content is as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml" id = "mainWindow"> <Head> <Title> No title page </title> <Script language = "javascript"> Function SetPorgressBar (pos) { // Set the progress bar to center Var screenHeight = window ["mainWindow"]. offsetHeight; Var screenWidth = window ["mainWindow"]. offsetWidth; ProgressBarSide. style. width = Math. round (screenWidth/2 ); ProgressBarSide. style. left = Math. round (screenWidth/4 ); ProgressBarSide. style. top = Math. round (screenHeight/2 ); ProgressBarSide. style. height = "21px "; ProgressBarSide. style. display = "";
// Set the progress bar percentage ProgressBar. style. width = pos + "% "; ProgressText. innerHTML = pos + "% "; }
// Hide the progress bar after completion Function SetCompleted () { ProgressBarSide. style. display = "none "; } </Script> </Head> <Body> <Div id = "ProgressBarSide" style = "position: absolute; height: 21x; width: 100px; color: Silver; border-width: 1px; border-style: Solid; display: none "> <Div id = "ProgressBar" style = "position: absolute; height: 21px; width: 0%; background-color: # 3366FF"> </div> <Div id = "ProgressText" style = "position: absolute; height: 21px; width: 100%; text-align: center"> </div> </Div> </Body> </Html> |
Background code, Default. aspx. cs:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
Using System; Using System. Data; Using System. Configuration; Using System. Web; Using System. Web. Security; Using System. Web. UI; Using System. Web. UI. WebControls; Using System. Web. UI. WebControls. WebParts; Using System. Web. UI. HtmlControls; Using System. Threading; Using System. IO;
Public partial class _ Default: System. Web. UI. Page { Private void beginProgress () { // Progress progressbar.htm display progress bar Interface String templateFileName = Path. Combine (Server. MapPath ("."), "ProgressBar.htm "); StreamReader reader = new StreamReader (@ templateFileName, System. Text. Encoding. GetEncoding ("GB2312 ")); String html = reader. ReadToEnd (); Reader. Close (); Response. Write (html ); Response. Flush (); }
Private void setProgress (int percent) { String jsBlock = "<script> SetPorgressBar ('" + percent. ToString () + "'); </script> "; Response. Write (jsBlock ); Response. Flush (); }
Private void finishProgress () { String jsBlock = "<script> SetCompleted (); </script> "; Response. Write (jsBlock ); Response. Flush (); }
Private void Page_Load (object sender, System. EventArgs e) { BeginProgress ();
For (int I = 1; I <= 100; I ++) { SetProgress (I );
// Replace the actual operation with thread sleep, such as loading data. System. Threading. Thread. Sleep (50 ); }
FinishProgress (); } } |
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
