代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>编程开发 > ASP.NET > Asp.Net实现进度条效果源码

Asp.Net实现进度条效果源码

ASP.NET 围观1158次 更新日期:2017-06-28 13:14:25 留下足迹

其效果如下:

首先,在HTML文档中加入如下代码:
<div> 
<table class="statusTable"> 
<tr> 
<td id="progress1"> </td> 
<td id="progress2"> </td> 
<td id="progress3"> </td> 
<td id="progress4"> </td> 
<td id="progress5"> </td> 
<td id="progress6"> </td> 
<td id="progress7"> </td> 
<td id="progress8"> </td> 
<td id="progress9"> </td> 
<td id="progress10"> </td> 
</tr> 
</table> 
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="0"></asp:Label> 
</div> 
<div> 
<input id="btnRequest" type="button" value="请求" onclick="Request()" /> 
<input id="btnStop" type="button" value="停止" disabled="disabled" onclick="Stop()" /> 
</div> 
Js部分加入如下Js代码: 
<script language="javascript" type="text/javascript"> 
var idx = 0; 
var progressTimer; 
var progressInterval = 1000; 
function Request() 

document.getElementById("btnStop").disabled = ""; 
document.getElementById("btnRequest").disabled = "disabled"; 
if(idx >= 10) 

Clear(); 
return; 

var arg = idx; 
<%= ClientScript.GetCallbackEventReference(this, "arg", "GetMsgBack",null) %>; 
idx++; 
progressTimer = setTimeout('Request()',progressInterval); 

function GetMsgBack(result) 

document.getElementById('progress'+idx).style.backgroundColor = 'blue'; 
var status = Number(result) * 10; 
document.getElementById("Label1").innerHTML = status + "%"; 

function Stop() 

clearTimeout(progressTimer); 
Clear(); 

function Clear() 

idx = 0; 
document.getElementById("btnStop").disabled = "disabled"; 
document.getElementById("btnRequest").disabled = ""; 
document.getElementById("Label1").innerHTML = "0"; 
for (var i = 1; i <= 10; i++) 
document.getElementById('progress' + i).style.backgroundColor = 'transparent'; 

</script> 
css样式文件中加入如下代码: 
.statusTable 

width:100px; 
border:solid 1px #000000; 
padding-bottom:0px; 
margin-bottom:0px; 

.statusTable td 

height:20px; 

Asp.Net服务端实现回调代码如下: 
public partial class DigitStatus : System.Web.UI.Page, ICallbackEventHandler 

private string AspEventArgs; 
protected void Page_Load(object sender, EventArgs e) 


public void RaiseCallbackEvent(string EventArgs) 

AspEventArgs = EventArgs; 

public string GetCallbackResult() 

int i = Convert.ToInt32(AspEventArgs); 
i++; 
return i.ToString(); 


这样,一个简易的进度条就实现了,运行即可得到如页首处的效果。

转载请注明:代码学堂>编程开发 > ASP.NET > Asp.Net实现进度条效果源码

喜欢 (807) or 分享 (242)