HTML <progress> 進度條

admin發表於2019-03-27
HTML

HTML5之前沒有自帶的進度條效果，只能通過JavaScript結合CSS模擬實現。

模擬實現進度條可以參閱JavaScript 動態進度條效果一章節。

大家知道，版本的更新通常意味著功能的增強與便利性的提高，HTML也不例外。

HTML5新增<progress>標籤，可以將其用在檔案上傳與下載的進度顯示。

也可以將其作為簡單的loadding載入狀態提示效果，下面將對其進行詳細介紹。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  進度條演示：<br/>
  <progress value="20"  max="100"></progress>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/27/134824gh6b4d1iidbj882i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此標籤具有的主要屬性如下：

（1）.max：整數或者浮點數，用於表示進度條的總量，預設值是1。

（2）.value：整數或者浮點數，表示當前進度條的進度。

後面結合程式碼例項對這兩個屬性的一些細節進行詳細說明。

一.作為loadding進度條：

loadding進度條或者載入等待效果能夠給瀏覽者較為人性化的提示。

progress標籤可以實現比較簡單的上述效果，只要將<progress>標籤置入頁面，不設定value屬性值即可。

其實很容易理解，不設定value屬性值，也就不知道當前進度在何處，於是顯示出一個loadding狀態。

在不同的瀏覽器顯示的狀態不同，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  loadding載入效果：<br/>
  <progress max="100"></progress>
</body>
</html>

執行後此標籤呈現一種動態效果，非常簡單不多介紹。

二.設定進度條位置：

既然是進度條控制元件，自然可以設定當前所在的進度。

所謂的進度其實就是value屬性值與max屬性值數值比例的在進度條外觀上的一種體現。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  進度條演示：<br/>
  <progress value="50"  max="100"></progress>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/27/134911wcxjpyk4lgwwxwxw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.value屬性值設定為50。

（2）.max設定為100。

（3）.進度條當前完成的進度其實就是value/max比例位置，所以上述進度條完成一半。

（4）.max屬性值預設為1，如果顯式設定，那麼值必須是大於0的整數或者浮點數。

（5）.value屬性值必須是介於0-max之間，於是如果沒有顯式設定max值，那麼value必須介於0.01~1.0之間。

三.動態效果演示：

此控制元件在實際專案中通常用於顯示載入或者下載等效果的進度，是一個動態效果。

這自然要結合JavaScript來實現，下面就演示一段簡單的程式碼例項供大家參考。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var p=document.getElementById("p");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    goprogress()
  }
  function goprogress(){
    gotoend(p,0);
  }
  function gotoend(p,value){
    var value=value+1;
    p.value=value;
    if(value<100) {
      setTimeout(function(){gotoend(p, value);},20)
    }else{
      setTimeout(function(){alert("全部載入完成")},20);
    }
  }
}
</script>  
</head>
<body>
<progress id="p" value="0" max="100"></progress>
<br>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

點選按鈕可以實現進度條載入效果，對程式碼簡單分析如下：

（1）.進度條控制元件之所以呈現視覺上的動態效果是通過定時器函式每隔20毫秒遞迴呼叫一次gotoend函式。

（2）.每呼叫一次gotoend函式，可以將value值加1，於是就出現了動態效果。

（3）.當value值等於100，那麼彈出完成提示。

當然實際應用中，此控制元件都是需要和伺服器進行互動實時顯示檔案上傳下載進度。

比如可以結合ajax或者FileReader，本文不再進行介紹，可以自行在網上查詢。

相關閱讀：

（1）.setTimeout參閱JavaScript setTimeout()一章節。

（2）.document.getElementById參閱document.getElementById()一章節。

相關文章