在某论坛发现了一个如此不错的效果,进入网站时可以显示一个百分比加载进度条。
<style type=”text/css”>
#out {
width:200px;
height:16px !important;
border:1px solid #5858D1;
text-align:center;
position:relative;
font-size:12px;
_height:18px;
}
#out, #out * {
padding:0;
margin:0;
}
#num {
height:16px;
line-height:16px;
position:absolute;
top:0;
left:90px;
z-index:1001;
}
#step {
background:#5858D1;
width:1%;
overflow:hidden;
position:absolute;
left:0;
top:0;
height:16px;
z-index:1000;
}
</style><div id=”out”>
<span id=”num”>1%</span>
<div id=”step”></div>
</div><script type=”text/javascript”>
var timer;
var stepNum = 0;
function start()
{
timer = setInterval(“begin()”, 10);
}function begin()
{
stepNum += 1;
if (stepNum < 101)
{
document.getElementById(“step”).style.width = stepNum + “%”;
document.getElementById(“num”).innerHTML = stepNum + “%”;
}
else
{
clearInterval(timer);// 加载完了,该干嘛干嘛
window.location = ‘http://www.jiucool.com’;
}
}window.onload = function()
{
start();
}
</script>
