html5中的meter标签改变颜色规则

一、meter标签改变颜色规则

meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、[low,high]，(high,max]。

最佳值 optimum 和 value 的不同决定了显示的颜色的不同。最佳值默认是1/2(min+max)。

规则：

• 和 optimum 值在同一个区间的 value 值，那么显示为绿色；
• 和 optimum 值不在同一个区间的 value 值，以optimum 所在的区间为中心，依次向左右两边的区间 为 黄色、红色。

注意：optimum所在区间如果是开区间，value取值为开区间的值是也是绿色。比如：optimum所在区间[min,low)，value值等于low时也是绿色。
规则具体解析如下：

• 最佳值 optimum所在区间是[min,low)，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；
• 最佳值 optimum所在区间是[low,high]，那么区间[low,high]绿色，(min,low]黄色，(high, max]黄色；
• 最佳值 optimum所在区间是(high,max]，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；

二、使用案例

优区间划分：[0,60)，[60,90], (90,100]
最优59，值60
最优60，值60
最优60，值61
最优90，值89
最优90，值90
最优91，值90

参考文章： HTML5 meter 标签理解，meter 变化颜色规则