HTML <meter> 計量條

admin發表於2019-04-14
HTML

<meter>元素是HTML5新增，用來顯示已知資料範圍內標量值，通常用於指示當前資料處於某種狀態。

上述闡述太晦澀了，原本很容易理解的概念一旦套上高大上的概念就讓人有點迷茫。

計量條對於絕大度數朋友應該都不陌生，舉一個簡單的例子，競技遊戲中，操作的人物通常有血條或者魔法條。

當血量或魔法量較多時，血條或者魔法條呈現比較舒適的綠色，當血量或者魔法量下降到指定量之下，呈現黃色。

如果血量或者魔法量再降低到指定量之下後，血條或者魔法條會呈現紅色顯示，本文要介紹的計量條大致如此。

此標籤當前的瀏覽器相容性也不錯，並且隨著時間的推移和軟硬體的進步，支援度會更好，以實測為準。

首先通過一段程式碼例項對其有一個直觀的感受：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154332w1tgfxaqlokgaktp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

<meter>元素具有如下幾個主要屬性：

（1）.max：數值型別，設定計量條的最大值，如果省略此值，預設為1。

（2）.min：數值型別，設定計量條的最小值，必須小於max，如果省略此值，預設值為0。

（3）.value：數值型別，設定計量條的當前值，必須介於min與max之間。

（4）.low：數值型別，設定過低閾值，值不小於min，且不大於high與max，預設值為min。

（5）.high ：數值型別，設定過高閾值，值大於min與low，且小於max值，預設值max。

（6）.optimum：設定最佳值，值介於min與max之間。

閾值是一個臨界值，高於此值或者低於此值都會有一個狀態明顯轉變。

比如18歲是一個閾值，大於等於18歲，如果犯罪的話可能就有較為嚴重的刑事處罰，小於18歲明顯處罰較輕。

程式碼例項如下：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154400cywuy0bz7aojj0au.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼說明如下：

（1）.value值預設為0。

（2）.min預設為0，max預設為1。

（3）.low預設為0，high預設為1。

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154428t5mmiceg7i5irur1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼說明如下：

（1）.value值為1。

（2）.計量條已經滿格，這也證明了max預設值為1。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  計量條演示：<br/>
  <meter min="10" low="30" high="80" max="100" value="90"></meter>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154453pc08u94j9tjup92a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到計量條呈現了黃色，與前面的綠色不同。

這是計量條的一大特點之一，當前值超過一定的閾值會呈現出不同的顏色。

和文章開頭所說的魔法值和血量具有類似的原理，optimum屬性值對於計量條當前呈現的顏色值也會有影響。

計量條本身是很好理解的，唯一的難點可能就是掌握計量條的顏色呈現規則。

考慮到文章的篇幅問題，本文不再介紹，具體可以參閱HTML <meter> 顏色規則一章節。

如果有關於本文的相關建議或者意見可以在文章底部留言，本站會第一時間回覆。

相關文章