JavaScript实现简单进度条

      好久没更新博客了，换了工作环境，比较忙，月底了一篇文章都没有更新。这里简单实现一个功能。Javascript实习进度条。文本借鉴于:http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx，在次基础上通过Javascript来实现这个功能。欢迎提出意见。

可以通过点击上面的按钮来看进度条的效果。点击此处展开代码：

点击展开

 <script language="javascript">
        function SetPorgressBar(pos)
        {
            //设置进度条居中
            var screenHeight = document.body.offsetHeight;
            var screenWidth =document.body.offsetWidth;
            ProgressBarSide.style.width = Math.round(screenWidth / 2);
            ProgressBarSide.style.left = Math.round(screenWidth / 4);
            ProgressBarSide.style.top = Math.round(screenHeight / 2);
            ProgressBarSide.style.height = "100px";
            ProgressBarSide.style.display = "";
             
            //设置进度条百分比                       
            ProgressBar.style.width = pos + "%";
            ProgressText.innerHTML = pos + "%";
        }

        //完成后隐藏进度条
        function SetCompleted()
        {       
            ProgressBarSide.style.display = "none";
        }
    </script>

 

 <script>
    var i=0;
    var fun;
    function myRefresh()
    {     
        SetPorgressBar(i);
        i++;
        if(i<100)
        {           
           fun=setTimeout("myRefresh()",100);
        }
        else
        {
            SetCompleted();
            window.clearTimeout(fun);
            alert("加载完成");   
            i=0;       
        }
    }    
    window.onload=myRefresh;
    </script>

 

 <div id="ProgressBarSide" style="position: absolute; height: 100px; width: 100px; color: Silver;
        border-width: 1px; border-style: Solid; display: none">
        <div id="ProgressBar" style=" font-size:larger; position: absolute; height: 100px; width: 0%; background-color: #3366FF">
        </div>
        <div id="ProgressText" style="position: absolute; height: 100px; width: 100%;text-align:center; font-size:80px;">
        qqqq
        </div>
    </div>
    <div>
        <input onclick="javascript:myRefresh();" type="button" value="重新加载进度条"></div>
    <div>
        <input onclick="javascript:window.location.reload();" type="button" value="重新加载页面">
    </div>

 

Best Regards,

Charles Chen

msn: gotosunny@msn.com