Javascript jquery css 寫的簡單進度條控件

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Javascript jquery css 寫的簡單進度條控件

編輯：JQuery特效代碼

通過我們偉大的 CSS，可以實現非常漂亮的進度條樣式。加上 Javascript 的效果，就可以完全“欺騙”我們的用戶，讓他們有耐心等待浏覽器處理完成。上述的原理已經知道了，那麼就可以直接看代碼了。本人使用的還是 jQuery 框架，因為這樣簡短的代碼可能會更容易理解。

當然這個控件還有很多需要完成的地方，我僅僅是提供了一種遵循 Web 標准的實現思路。廢話不多說.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Javascript Progress Bar Demo - poluoluo.com</title> 
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
        <style type="text/css"> 
            #progress {background: white; height: 20px; padding: 2px; border: 1px solid green; margin: 2px;} 
            #progress span {background: green; height: 16px; text-align: center; padding: 1px; margin: 1px; 
                display: block; color: yellow; font-weight: bold; font-size: 14px; width: 0%;} 
        </style> 
        <script type="text/javascript"> 
            var progress_node_id = "progress"; 
            function SetProgress(progress) { 
                if (progress) { 
                    $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); 
                    $("#" + progress_node_id + " > span").html(String(progress) + "%"); 
                } 
            } 
            var i = 0; 
            function doProgress() { 
                if (i > 100) { 
                    alert("Progress Bar Finished!"); 
                    return; 
                } 
                if (i <= 100) { 
                    setTimeout("doProgress()", 500); 
                    SetProgress(i); 
                    i++; 
                } 
            } 
            $(document).ready(function() { 
                doProgress(); 
            }); 
        </script> 
</head> 
<body> 
    <h1>Javascript 進度條 Demo</h1> 
    <p>原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式），刷新查看</p> 
    <div id="progress"><span> </span></div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:使用jquery給input和textarea設定ie中的focus
下一頁:用jQuery實現檢測浏覽器及版本的腳本代碼

JQuery特效代碼

jquery 頁面全選框實踐代碼: 代碼如下:<html> <head> <meta http-equiv
jquery鼠標停止移動事件: . 代碼如下:<script src=jquery.js></script>
jquery 快速回到頁首的方法: . 代碼如下: $(function() { $(#back_top).click(function

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章