网页进度条的实现
1.当页面在向服务器获取数据需要较长时间时,可以将页面暂时屏蔽,并显示进度条,虽然进度条并不能真实的反映页面加载的情况,但是却是一种很好的用户体验。
function show() {
var bgDiv = document.createElement("div");
bgDiv.id = "bgDiv";
bgDiv.style.position = "absolute";
bgDiv.style.left = 0;
bgDiv.style.top = 0;
bgDiv.style.backgroundColor = "Gray";
bgDiv.style.width = 0;
bgDiv.style.height = 0;
bgDiv.style.zIndex = 10000;
bgDiv.style.visibility = "hidden";
bgDiv.style.opacity = 0.4;
bgDiv.style.filter = "alpha(opacity=40)";
document.body.appendChild(bgDiv);
var barDiv = document.createElement("div");
barDiv.id = "barDiv";
barDiv.align = "center";
barDiv.style.position = "absolute";
barDiv.style.left = "50%";
barDiv.style.top = "50%";
barDiv.style.zIndex = 10001;
barDiv.style.marginLeft = -107;
barDiv.style.marginTop = -7;
barDiv.style.visibility = "hidden";
document.body.appendChild(barDiv);
var tagSelectList = document.getElementsByTagName("select");
for (i = 0; i < tagSelectList.length; i++)
{
tagSelectList[i].style.visibility = "hidden";
}
bgDiv.style.visibility = 'visible';
bgDiv.style.width = (document.body.scrollWidth > window.screen.width ? document.body.scrollWidth : window.screen.width) + "px";
bgDiv.style.height = (document.body.scrollHeight > window.screen.height ? document.body.scrollHeight : window.screen.height) + "px";
barDiv.style.visibility = 'visible';
}
var bgDiv = document.createElement("div");
bgDiv.id = "bgDiv";
bgDiv.style.position = "absolute";
bgDiv.style.left = 0;
bgDiv.style.top = 0;
bgDiv.style.backgroundColor = "Gray";
bgDiv.style.width = 0;
bgDiv.style.height = 0;
bgDiv.style.zIndex = 10000;
bgDiv.style.visibility = "hidden";
bgDiv.style.opacity = 0.4;
bgDiv.style.filter = "alpha(opacity=40)";
document.body.appendChild(bgDiv);
var barDiv = document.createElement("div");
barDiv.id = "barDiv";
barDiv.align = "center";
barDiv.style.position = "absolute";
barDiv.style.left = "50%";
barDiv.style.top = "50%";
barDiv.style.zIndex = 10001;
barDiv.style.marginLeft = -107;
barDiv.style.marginTop = -7;
barDiv.style.visibility = "hidden";
document.body.appendChild(barDiv);
var tagSelectList = document.getElementsByTagName("select");
for (i = 0; i < tagSelectList.length; i++)
{
tagSelectList[i].style.visibility = "hidden";
}
bgDiv.style.visibility = 'visible';
bgDiv.style.width = (document.body.scrollWidth > window.screen.width ? document.body.scrollWidth : window.screen.width) + "px";
bgDiv.style.height = (document.body.scrollHeight > window.screen.height ? document.body.scrollHeight : window.screen.height) + "px";
barDiv.style.visibility = 'visible';
}
![](http://pic.cnitblog.com/avatar/352036/20130928152523.png)
作者:sy
出处:http://www.cnblogs.com/sydeveloper
QQ:522733724
本页版权归作者和博客园所有,欢迎转载,但未经作者同意必须保留此段声明,
且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利