js实现进度条效果

需求分析：

　　最近学习javascript客户端脚本语言，学到了两个定时器函数setInterval()和setTimeout()，回想起以前在网页上看到的进度条效果可以使用定时器来实现，所以完成了进度条的设计。

编写思路：

　　定义一个div作为进度条总体边框，span作为里面的内容，初始时span宽度为0，随着定时器的间隔不断增加span的宽度，直到与进度条总体宽度相同。

　　1.匀速推进的进度条：进度条推进的速度为定值

　　2.速度随机推进的进度条（为了模仿网页加载过程中加载速度的不稳定变化）：进度条推进速度随机

效果演示：匀速 变速

具体实现：

　　setInterval()实现代码：

<script>
window.onload=function(){
var oDiv = document.getElementsByTagName('div')[0];
var oSpan = document.getElementsByTagName('span')[0];
var oP = document.getElementsByTagName('p')[0];

var num=0;
var time = 50;var timer = null;
timer = setInterval(function(){

if(num < 100){
oSpan.style.width = oSpan.offsetWidth + 5 + 'px';
num = num + 1;
oP.innerHTML = num + '%';
}else{

clearInterval(timer);
location.href='http://www.baidu.com';
}
},time);
}
</script>

　　setTimeout实现代码：

<script type="text/javascript">
//window.onload=function(){
var oDiv = document.getElementsByTagName('div')[0];
var oSpan = document.getElementsByTagName('span')[0];
var oP = document.getElementsByTagName('p')[0];

var num=0;
var timer = null;
timedCount();

function timedCount(){
if(num < 100){
oSpan.style.width = oSpan.offsetWidth + 5 + 'px';
num = num + 1;
oP.innerHTML = num + '%';

//设置随机时间
var arr = Array(0,0,100,0,0,200,0,0,50,0,0);
var time=Math.random()*50 + arr[Math.ceil(Math.random()*(arr.length-1))];

//循环调用
timer = setTimeout("timedCount()",time);
}else{
setTimeout(timer);
location.href='http://www.baidu.com';
}
}
//}
</script>

设计实现中出现的问题的问题及解决方法：
　　问题：setInterval()函数 可以放在window.onload(){}中，直接放在head中 。setTimeout()函数 放在window.onload(){}中不起作用。

　　解决办法：通过网上查找，找到了出错原因。function n(){}被定义在了window.onload的处理方法里，成了一个内部函数，并没有暴露在window对象下，而setTimeout()的运行时环境是在window下的，会找不到这个方法，这个跟冲突没关系。 当你去掉window.onload之后，funciton n(){}就暴露在window下了，就可以找到了。