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>
类似这样的,就可以实现了进度的动态改变。
强大的HTML5提供了一种新的标签<progress>,只需要通过该标签+简单的js,即可以实现进度条滚动的效果。
代码如下:
HTML
1<progress max="100" value="0" id="pg"></progress>这个标签意义很明确,并且属性只有以上两个,max表示需要完成的任务量,value是目前完成的任务量。
js
12345var pg=document.getElementById('pg') setInterval(function(e){ if(pg.value!=100) pg.value++ else pg.value=0},100)以上的实现方式不仅更加的语义化,同时也极大的简化了我们的代码,并且灵活性更高,所以熟练使用HTML5是非常有必要的!
不过HTML5标签的浏览器兼容性也是我们需要考虑的一个问题,所以如果网页需求的兼容性比较高的话,特别是对低版本IE有兼容需求的话,那么HTML5的标签就不太适用了。以下为<progress>的浏览器支持情况。
<pre t="code" l="js">s[0].style.width = 100 - r / i * 100 + quot%quot该代码不就是设置进度条的么如果你能更改页面 你在标签中这样写:<pre t="code" l="html">lth5gt(资料完整度ltspan id=quotwz_jdquotgtlt/spangt)lt/h5gt然后在你的JS中 <pre t="code" l="js">s[0].style.width = 100 - r / i * 100 + quot%quot的下面 写上:
<pre t="code" l="js">document.getElementById(quotwz_jdquot).innerHTML = 100 - r / i * 100 + quot%quot不就OK了么
注意:你的JS中哪儿有那行代码 就在那行下面 追加
如果不能更改页面就在那行代码下面 这样写:<pre t="code" l="js">document.getElementsByTagName(quoth5quot)[0].innerHTML = quot(资料完整度quot+ (100 - r / i * 100) + quot%)quot里面的0 表示是第1个h5标签 如果你有多个 自己进行更改