首頁 > 開發者 > JavaScript

javascript實現簡單的進度條

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript實現簡單的進度條

 　　本文給大家分享2個javascript實現簡單的進度條，一個是個人製作一個是網友實現的，都很不錯，這裡推薦給大家。

　　樣本一：

　　?

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>

　　再來分享一個結合.net的

　　建立一個WEB工程，添加新項->HTML頁面，命名為ProgressBar.htm，內容如下：

　　?

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>無標題頁</title>

<script language="javascript">

function SetPorgressBar(pos)

{

//設定進度條置中

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 = "";

 

//設定進度條百分比

ProgressBar.style.width = pos + "%";

ProgressText.innerHTML = pos + "%";

}

 

//完成後隱藏進度條

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>

　　後台代碼，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()

{

//根據ProgressBar.htm顯示進度條介面

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

 

//此處用線程休眠代替實際的操作，如載入資料等

System.Threading.Thread.Sleep(50);

}

 

finishProgress();

}

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More