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下了,就可以找到了。

posted on 2016-03-20 23:50  pujianguo  阅读(1527)  评论(0编辑  收藏  举报