html5中的meter标签改变颜⾊规则
⼀、meter标签改变颜⾊规则
meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、[low,high]，(high,max]。
最佳值 optimum 和 value 的不同决定了显⽰的颜⾊的不同。最佳值默认是1/2(min+max)。
规则：
html5颜代码和 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]红⾊；
⼆、使⽤案例
<p>优区间划分：[0,60)，[60,90], (90,100]</p>
<p>最优59，值60<meter min="0" low="60" high="90" max="100" optimum="59" value="60"></meter></p> <p>最优60，值60<meter min="0" low="60" high="90" max="100" optimum="60" value="60"></meter></p> <p>最优60，值61<meter min="0" low="60" high="90" max="100" optimum="60" value="61"></meter></p> <p>最优90，值89<meter min="0" low="60" high="90" max="100" optimum="90" value="89"></meter></p> <p>最优90，值90<meter min="0" low="60" high="90" max="100" optimum="90" value="90"></meter></p> <p>最优91，值90<meter min="0" low="60" high="90" max="100" optimum="91" value="90"></meter></p>
参考⽂章：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。