商業源碼熱門下載www.html.org.cn
在網上查閱了很多相關資料，參照對比一番后自己整理了一下，做了個小例子。能夠實現根據后臺數據加載的進度在前臺動態更新進度條、進度條在頁面居中顯示、在進度條內顯示百分比，完成進度后隱藏進度條。個人感覺還是有一定的參考價值，貼出來先。
建立一個web工程，添加新項->html頁面，命名為progressbar.htm，內容如下：
<!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" >
<div id="progressbar" ></div>
<div id="progresstext" ></div>
</div>
</body>
</html>
后臺代碼，default.aspx.cs：
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();
}
}
前臺頁面代碼在此省略，可以放置任意控件。
新聞熱點
疑難解答
圖片精選
