HTML <meter> 颜色规则

2019-4-14 18:31| 作者: admin| 查看: 1538| 评论: 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="" />
<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="" />
<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="" />
<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="" />
<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所在区间由近到远,分别呈现黄色与红色。

上面已经对计量条元素的颜色呈现规则介绍的比较清晰了,如果对本文有任何意见或者建议可以在文档底部留言。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部