「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」
下图中的效果是不是很常见，那怎么实现这种效果呢？尤其是效果中的红、绿、黄颜色变化，我们应该怎样控制呢？
其实只需要一个meter属性即可。首先，简单介绍一下meter属性中的常用值
<meter>标签属性
| 属性 | 含义 |
|---|---|
| value | 规定度量的当前值（必须参数） |
| min | 规定范围的最小值，默认为0 |
| low | 规定被视作低的值的范围 |
| high | 规定被视作高的值的范围 |
| max | 规定范围的最大值，默认为1 |
| optimum | 规定度量的优化值，如果该值高于high的值，则该值越高越好，如果该值低于low的值，则该值越低越好 |
颜色变化
- 只显示绿色的情况
-
<meter>标签仅有value值，形如：
<meter value = "0.7"></meter>
<meter>标签中只有value、min、max三个值时，形如：
<meter value = "45" min = "0" max = "100"></meter>
2.显示绿色和黄色两种颜色的情况
<meter>标签同时有value、min、max、low、high五个属性值时，颜色变化就成了绿色和黄色两种。
- 当value值在low和high之间，颜色为绿色。举例：
<meter value = "60" min = "0" low = "30 "high = "70"max = "100"></meter>
- 当value值在min和low之间，或者，当value值在high和max之间，颜色就为黄色。举例：
<meter value = "80" min = "0" low = "30 "high = "70"max = "100"></meter>
<meter value = "20" min = "0" low = "30" high = "70" max = "100"></meter>
3. 显示红色、绿色和黄色三种颜色的情况
<meter>标签中同时有value、min、low、high、max、optimum六个属性值时，这时颜色变化就为红色、绿色和黄色三种颜色。
那么怎么控制这三个颜色的变化呢？
首先用low、min、high、max四个值划分出三个区间
[min,low] [low,high] [high,max]
然后看value值和optimum值。
- 如果value和optimum在同一区间内，那么度量衡会显示出绿色。举例：
<meter value="75" min="0" low="50" high="80" max="100" optimum="79"></meter>
- 如果value和optimum在两个相邻区间内，那么度量衡会显示黄色。举例：
<meter value="45" min="0" low="50" high="80" max="100" optimum="60"></meter>
- 如果value和optimum的值相隔了一个区间，那么度量值会显示红色。举例：
<meter value="30" min="0" low="50" high="80" max="100" optimum="85"></meter>
