您的位置:首頁> 實例代碼> HTML實例

HTML <meter> 顏色規則

2019-4-14 18:31| 作者: admin| 查看: 2233| 評論: 0|來自: 螞蟻部落

關于計量條元素的基本用法可以參閱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.tlmhwf.tw/" />
<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.tlmhwf.tw/" />
<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.tlmhwf.tw/" />
<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.tlmhwf.tw/" />
<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所在區間由近到遠,分別呈現黃色與紅色。

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


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
浙江6十1开奖号码查询r