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

时间： 2024-10-25 04:21:54

javascript实现简单的进度条

javascript实现简单的进度条的相关文章

javascript实现简单的进度条_javascript技巧

jQuery实现的简单百分比进度条效果示例_jquery

混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

html、css和jquery相结合实现简单的进度条效果实例代码_jquery

IOS实现简单的进度条功能_IOS

Linux中实现一个简单的进度条【转】

超简单Flash进度条制作技巧

用CSS实现简单的进度条

Android实战教程第二篇之简单实现两种进度条效果_Android