JavaScript實現簡單進度條

      好久沒更新部落格了，換了工作環境，比較忙，月底了一篇文章都沒有更新。這裡簡單實現一個功能。Javascript實習進度條。文本借鑒於:http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx，在次基礎上通過Javascript來實現這個功能。歡迎提出意見。可以通過點擊上面的按鈕來看進度條的效果。點擊此處展開代碼：

點擊展開

Code
 <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> Code
 <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> Code
 <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 Chenmsn: gotosunny@msn.com