HTML5中的進(jìn)度條簡介

作者：廖煜嶸譯 2012-07-31 09:53:33

在Web開發(fā)中，進(jìn)度條是很常見的一種表示工作進(jìn)度的方式。在過往的Web設(shè)計(jì)中，都必須使用第三方類庫等去實(shí)現(xiàn)進(jìn)度條。而在HTML5的世界中，已經(jīng)在不少的瀏覽器的內(nèi)置實(shí)現(xiàn)了進(jìn)度條。在本文中，將講解如何在頁面中使用HTML5的進(jìn)度條，目前HTML5的進(jìn)度條只支持在Firefox,Chrome和Opera中得到支持，在IE和Safari中還沒得到支持。

為了演示方便，在***個(gè)例子中，我們通過Javascript去控制時(shí)間從而不斷地更新進(jìn)度，并且允許用戶通過點(diǎn)擊按鈕開始進(jìn)度條的更新，一旦進(jìn)度條開始更新，則按鈕變得不可點(diǎn)擊。如果進(jìn)度條完成的話，則又可以點(diǎn)擊按鈕，整個(gè)進(jìn)度條在Firefox的效果如下圖：

下面我們開始一步步實(shí)做這個(gè)效果：

1）創(chuàng)建HTML5 頁

首先創(chuàng)建基本的HTML 5基本框架頁

   <!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
 
</script> 
</head> 
<body> 
 
</body> 
</html>

2）增加進(jìn)度條標(biāo)簽

首先，在body部分，添加如下的進(jìn)度條的標(biāo)簽：

<p>Task progress:</p> 
progress id="prog" value="0" max="100"></progress>

HTML 5中的進(jìn)度條使用的是<progress>標(biāo)簽，在這里，設(shè)置了開始的值value為0，***的值為100，當(dāng)任務(wù)完成后，進(jìn)度條的值就會(huì)變成100了。我們將通過Javascript去更新這個(gè)值，所以以上的標(biāo)簽只是對(duì)進(jìn)度條進(jìn)行了初始化工作。

3）點(diǎn)擊按鈕的編寫
現(xiàn)在，我們開始編寫點(diǎn)擊按鈕的事件，代碼如下：

<input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
<div id="numValue">0%</div>

其中startProcess()的代碼如下：

//當(dāng)前進(jìn)度  
var currProgress = 0;  
//進(jìn)度條是否完成  
var done = false;  
//進(jìn)度條計(jì)數(shù)的***數(shù)值  
var total = 100;

在聲明了上面的變量后，就可以編寫startProgress()方法了，代碼如下：

   function startProgress() { 
 
 //獲得進(jìn)度條的標(biāo)簽 
var prBar = document.getElementById("prog"); 
//獲得開始按鍵 
var startButt = document.getElementById("startBtn"); 
//顯示的進(jìn)度百分比數(shù)值 
var val = document.getElementById("numValue"); 
}

接下來，當(dāng)用戶點(diǎn)了開始按鈕后，需要將按鈕設(shè)置為不可用，并且要更新進(jìn)度條的數(shù)值：

startButt.disabled=true; 
 
prBar.value = currProgress;

并且要顯示出進(jìn)度條當(dāng)前完成的百分比并顯示出來，使用如下的代碼：

val.innerHTML =Math.round((currProgress/total)*100)+"%";

接著就可以對(duì)進(jìn)度條的數(shù)字進(jìn)行累加了：

currProgress++;

并且要判斷如果進(jìn)度數(shù)值達(dá)到100的話，則停止，設(shè)置done=false的標(biāo)識(shí)，否則每0.1秒通過Javascript的setimeout方法進(jìn)行延時(shí)，如下：

 if(currProgress>100) done=true; 
//如果還沒到進(jìn)度條100的數(shù)值，則繼續(xù)累加 
if(!done) 
    setTimeout("startProgress()", 100); 
 
//如果進(jìn)度條已經(jīng)達(dá)到100的數(shù)值，則重新設(shè)置按鈕可用，重新設(shè)置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>

責(zé)任編輯：佚名來源： 51CTO.com

HTML5 進(jìn)度條