计量条有一个特点，根据value值所在的区间不同，所呈现的颜色也不相同。
难点就在于如何去掌握计量条颜色呈现的规则，本文专注于解决此问题。
总体上可以分为两种情况：
（1）.没有规定optimum属性。
（2）.规定optimum属性。
一.知识准备：
meter元素具有min、low、high和max属性，这四个属性可以划分三个数据区间。
为了后面介绍方面，将不同的区间分别做一下指代说明：
（1）.min~low：区间一。
（2）.low~high：区间二。
（3）.high~max：区间三。
value在不同的区间，计量条会有不同的呈现颜色，加optimum属性后会更为复杂一些。
下面分别就上述两种情况通过代码实例做一下演示，希望能够给需要的朋友带来一定的帮助。
image.png
二.没有规定optimum属性：
没有规定optimum属性的时候比较简单，首先总结一下规则：
（1）.value值在区间一，计量条呈现黄色。
（2）.value值在区间二，计量条呈现绿色。
（3）.value值在区间三，计量条呈现黄色。
代码实例如下：
<!DOCTYPE html>
<``html``>
<``head``>
<``meta charset``=``"utf-8"``>
<``meta name``=``"author" content``=``"[http://www.softwhy.com/](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``>
|
上述代码运行效果截图如下：
上述代码简单演示了value在三个区间时，计量条所呈现的颜色。
可以看到没有规定optimum属性的时候，规则非常的简单。
三.规定optimum属性的时候：
如果元素规定此属性，颜色呈现规则只是稍微复杂了一点，可以说并没有到难的程度。
有人之所以感觉掌握此规则比较难，并不是规则难，而是没有人告诉你规则是什么，自己钻研有点费时间而已。
image.png
呈现规则总结如下：
（1）.如果value值与optimum属性值在同一个区间，那么计量条呈现绿色。
（2）.如果value值与optimum属性值不在同一个区间，那么optimum所在的区间位置作为参考点， 以参考点右侧为例，距离参考点所在区间由近到远，计量条的颜色分别呈现黄色和红色；对于参考点的左侧也是相同的道理，距离参考点所在区间由近到远，计量条的颜色同样分别呈现黄色和红色。
前面的参数可能会让读者感觉一头雾水，下面再通过代码实例对其进行详细演示。
<!DOCTYPE html>
<``html``>
<``head``>
<``meta charset``=``"utf-8"``>
<``meta name``=``"author" content``=``"[http://www.softwhy.com/](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``>
|
代码运行效果截图如下：
value值与optimum属性值在同一个区间，那么计量条呈现绿色。
<!DOCTYPE html>
<``html``>
<``head``>
<``meta charset``=``"utf-8"``>
<``meta name``=``"author" content``=``"[http://www.softwhy.com/](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``>
代码运行效果截图如下：
为了便于说明，将三种情况放在一起，对齐起来更加明显，代码分析如下：
（1）.三个计量元素唯一的区别就是value属性值的不同。
（2）.optimum属性值等于90，位于区间三。
（3）.第一个计量条元素中，value属性值与optimum属性值在同一个区间，所以计量条呈现绿色。
（4）.第二个计量条元素中，value属性值位于optimum属性值所在区间紧邻的区间二，所以计量条呈现黄色。
（5）.第三个计量条元素中，value属性值位于区间一，与optimum属性值所在区间又远了一步，所以计量条呈现红色。
image.png
上面演示的是value属性值所在区间在optimum所在区间左侧的情况，在右侧的情况也是相同道理，代码实例如下：
<!DOCTYPE html>
<``html``>
<``head``>
<``meta charset``=``"utf-8"``>
<``meta name``=``"author" content``=``"[http://www.softwhy.com/](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``>
|
代码运行效果截图如下：
value属性值所在区间在optimum属性值所在区间的右侧，但是道理与前面是相同的。
value属性值所在区间距离optimum所在区间由近到远，分别呈现黄色与红色。
上面已经对计量条元素的颜色呈现规则介绍的比较清晰了，如果对本文有任何意见或者建议可以在文档底部留言
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。
网友评论