HTML5中的進度條簡介
譯文作者：廖煜嶸 譯
在Web開發中，進度條是很常見的一種表示工作進度的方式。在過往的Web設計中，都必須使用第三方類庫等去實現進度條。而在HTML5的世界中，已經在不少的瀏覽器的內置實現了進度條。在本文中，將講解如何在頁面中使用HTML5的進度條，目前HTML5的進度條只支持在Firefox,Chrome和Opera中得到支持，在IE和Safari中還沒得到支持。
為了演示方便，在***個例子中，我們通過Javascript去控制時間從而不斷地更新進度，并且允許用戶通過點擊按鈕開始進度條的更新，一旦進度條開始更新，則按鈕變得不可點擊。如果進度條完成的話，則又可以點擊按鈕，整個進度條在Firefox的效果如下圖：
下面我們開始一步步實做這個效果：
1）創建HTML5 頁
首先創建基本的HTML 5基本框架頁
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript">
- </script>
- </head>
- <body>
- </body>
- </html>
2） 增加進度條標簽
首先，在body部分，添加如下的進度條的標簽：
- <p>Task progress:</p>
- progress id="prog" value="0" max="100"></progress>
HTML 5中的進度條使用的是<progress>標簽，在這里，設置了開始的值value為0，***的值為100，當任務完成后，進度條的值就會變成100了。我們將通過Javascript去更新這個值，所以以上的標簽只是對進度條進行了初始化工作。
3） 點擊按鈕的編寫
現在，我們開始編寫點擊按鈕的事件，代碼如下：
- <input id="startBtn" type="button" value="start" onclick="startProgress()"/>
- <div id="numValue">0%</div>
其中startProcess()的代碼如下：
- //當前進度
- var currProgress = 0;
- //進度條是否完成
- var done = false;
- //進度條計數的***數值
- var total = 100;
在聲明了上面的變量后，就可以編寫startProgress()方法了，代碼如下：
- function startProgress() {
- //獲得進度條的標簽
- var prBar = document.getElementById("prog");
- //獲得開始按鍵
- var startButt = document.getElementById("startBtn");
- //顯示的進度百分比數值
- var val = document.getElementById("numValue");
- }
接下來，當用戶點了開始按鈕后，需要將按鈕設置為不可用，并且要更新進度條的數值：
- startButt.disabled=true;
- prBar.value = currProgress;
并且要顯示出進度條當前完成的百分比并顯示出來，使用如下的代碼：
- val.innerHTML =Math.round((currProgress/total)*100)+"%";
接著就可以對進度條的數字進行累加了：
- currProgress++;
并且要判斷如果進度數值達到100的話，則停止，設置done=false的標識，否則每0.1秒通過Javascript的setimeout方法進行延時，如下：
- if(currProgress>100) done=true;
- //如果還沒到進度條100的數值，則繼續累加
- if(!done)
- setTimeout("startProgress()", 100);
- //如果進度條已經達到100的數值，則重新設置按鈕可用，重新設置currProgrss=0
- else
- {
- document.getElementById("startBtn").disabled = false;
- done = false;
- currProgress = 0;
- }
***完成的代碼如下：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo</title>
- <script type="text/javascript">
- var currProgress = 0;
- var done = false;
- var total = 100;
- function startProgress() {
- var prBar = document.getElementById("prog");
- var startButt = document.getElementById("startBtn");
- var val = document.getElementById("numValue");
- startButt.disabled=true;
- prBar.value = currProgress;
- val.innerHTML = Math.round((currProgress/total)*100)+"%";
- currProgress++;
- if(currProgress>100) done=true;
- if(!done)
- setTimeout("startProgress()", 100);
- else
- {
- document.getElementById("startBtn").disabled = false;
- done = false;
- currProgress = 0;
- }
- }
- </script>
- </head>
- <body>
- <p>This is a demo to accompany the following tutorial: <a href="http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5">Displaying the Progress of Tasks with HTML5</a></p><hr/>
- <p>Task progress:</p>
- <progress id="prog" value="0" max="100"></progress>
- <input id="startBtn" type="button" value="start" onclick="startProgress()"/>
- <div id="numValue">0%</div>
- </body>
- </html>
責任編輯：佚名
來源：
51CTO.com
