HTML <meter> 顏色規則

admin發表於2019-04-14
HTML

關於計量條元素的基本用法可以參閱HTML <meter> 計量條一章節。

計量條有一個特點，根據value值所在的區間不同，所呈現的顏色也不相同。

難點就在於如何去掌握計量條顏色呈現的規則，本文專注於解決此問題。

總體上可以分為兩種情況：

（1）.沒有規定optimum屬性。

（2）.規定optimum屬性。

一.知識準備：

meter元素具有min、low、high和max屬性，這四個屬性可以劃分三個資料區間。

為了後面介紹方面，將不同的區間分別做一下指代說明：

（1）.min~low：區間一。

（2）.low~high：區間二。

（3）.high~max：區間三。

value在不同的區間，計量條會有不同的呈現顏色，加optimum屬性後會更為複雜一些。

下面分別就上述兩種情況通過程式碼例項做一下演示，希望能夠給需要的朋友帶來一定的幫助。

二.沒有規定optimum屬性：

沒有規定optimum屬性的時候比較簡單，首先總結一下規則：

（1）.value值在區間一，計量條呈現黃色。

（2）.value值在區間二，計量條呈現綠色。

（3）.value值在區間三，計量條呈現黃色。

程式碼例項如下：

[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="20"></meter>
  <meter min="10" low="30" high="80" max="100" value="50"></meter>
  <meter min="10" low="30" high="80" max="100" value="90"></meter>
</body>
</html>

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

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

上述程式碼簡單演示了value在三個區間時，計量條所呈現的顏色。

可以看到沒有規定optimum屬性的時候，規則非常的簡單。

三.規定optimum屬性的時候：

如果元素規定此屬性，顏色呈現規則只是稍微複雜了一點，可以說並沒有到難的程度。

有人之所以感覺掌握此規則比較難，並不是規則難，而是沒有人告訴你規則是什麼，自己鑽研有點費時間而已。

呈現規則總結如下：

（1）.如果value值與optimum屬性值在同一個區間，那麼計量條呈現綠色。

（2）.如果value值與optimum屬性值不在同一個區間，那麼optimum所在的區間位置作為參考點， 以參考點右側為例，距離參考點所在區間由近到遠，計量條的顏色分別呈現黃色和紅色；對於參考點的左側也是相同的道理，距離參考點所在區間由近到遠，計量條的顏色同樣分別呈現黃色和紅色。

前面的引數可能會讓讀者感覺一頭霧水，下面再通過程式碼例項對其進行詳細演示。

[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" optimum="20" value="25"></meter>
</body>
</html>

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

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

value值與optimum屬性值在同一個區間，那麼計量條呈現綠色。

[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" optimum="90" value="95"></meter>
  <br/>
  <meter min="10" low="30" high="80" max="100" optimum="90" value="50"></meter>
  <br/>
  <meter min="10" low="30" high="80" max="100" optimum="90" value="20"></meter>
</body>
</html>

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

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

為了便於說明，將三種情況放在一起，對齊起來更加明顯，程式碼分析如下：

（1）.三個計量元素唯一的區別就是value屬性值的不同。

（2）.optimum屬性值等於90，位於區間三。

（3）.第一個計量條元素中，value屬性值與optimum屬性值在同一個區間，所以計量條呈現綠色。

（4）.第二個計量條元素中，value屬性值位於optimum屬性值所在區間緊鄰的區間二，所以計量條呈現黃色。

（5）.第三個計量條元素中，value屬性值位於區間一，與optimum屬性值所在區間又遠了一步，所以計量條呈現紅色。

上面演示的是value屬性值所在區間在optimum所在區間左側的情況，在右側的情況也是相同道理，程式碼例項如下：

[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" optimum="20" value="25"></meter>
  <br/>
  <meter min="10" low="30" high="80" max="100" optimum="20" value="50"></meter>
  <br/>
  <meter min="10" low="30" high="80" max="100" optimum="20" value="90"></meter>
</body>
</html>

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

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

value屬性值所在區間在optimum屬性值所在區間的右側，但是道理與前面是相同的。

value屬性值所在區間距離optimum所在區間由近到遠，分別呈現黃色與紅色。

上面已經對計量條元素的顏色呈現規則介紹的比較清晰了，如果對本文有任何意見或者建議可以在文件底部留言。

相關文章