首頁>Club>

如何實現jQuery進度條效果？

6
回覆列表
  • 1 # 趣航空大林

    以下就是透過Query實現進度條效果：

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="author" content="http://www.softwhy.com/" />

    <title>jQuery進度條效果程式碼</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>jQuery實現進度條效果程式碼</h1>

    <p>原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式），重新整理檢視</p>

    <div><span></span></div>

    </body>

    </html>

  • ∧ 中秋節和大豐收的關聯？
  • ∨ iPhone X拆機換電池圖文教程？