js其实是没法计算到网页的加载进度的。
目前见到的打开页面显示进度的有两种
1、如果是flash做的,那是flash自身的加载进度。
2、如果是js做的,做法比较简单,就是在页面的不同的地方插入script标签,动态改变进度的值。
<html><head>
<script>
var processPer = 0
window.onload = function(){
document.getElementById('process').innerHTML = processPer
}
</script>
</head>
<body>
<div id="process"></div>
<div></div>
....
<script>
processPer = 30
document.getElementById('process').innerHTML = processPer
</script>
<div></div>
....
<div></div>
....
<script>
processPer = 100
document.getElementById('process').innerHTML = processPer
</script>
</body>
</html>
类似这样的,就可以实现了进度的动态改变。
<!DOCTYPE "><html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>进度条</title>
<style type="text/css">
body{
text-align:center
}
.graph{
width:450px
border:1px solid #F8B3D0
height:25px
}
#bar{
display:block
background:#FFE7F4
float:left
height:100%
text-align:center
}
#barNum{
position:absolute
}
</style>
<script type="text/javascript">
function $(obj){ //封装方法,相当于jQuery
return document.getElementById(obj)
}
function go(){
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%"
$("bar").innerHTML = $("bar").style.width
if($("bar").style.width == "100%"){
window.clearInterval(bar) //进度为100时清除定时器
}
}
var bar = window.setInterval("go()",50) //设置定时器
window.onload = function(){
bar
}
</script>
</head>
<body>
<div class="graph">
<strong id="bar" style="width:1%"></strong>
</div>
</body>
</html>