深入理解和应用 <meter> 标签

望间2023年6月6日大约 3 分钟

<meter> 是 HTML5 的新增标签
用来显示已知访问的标量值，可以理解成进度条

注意

<meter> 在不同的浏览器中的显示效果是不同的

效果展示

<meter min="0" max="100" value="90" low="60" high="90" optimum="95"></meter>

<meter min="0" max="100" value="60" low="60" high="90" optimum="95"></meter>

<meter min="0" max="100" value="30" low="60" high="90" optimum="95"></meter>

属性

min

值域的最小边界，也就是最小值；它必须要比 最大值(max) 小；默认为 0

max

值域的最大边界，也就是最大值；它必须要比 最小值(min) 大；默认为 1

value

当前数值；如果设置了 max 和 min，它就必须介于 max 和 min 之间（min <= value <= max）

如果 value 设置的值不在 [min, max] 区间内，那么它的值就等于它最接近的一端的值，也就是说 value 的值会等于 min 或 max

low

低值区间的上限值；它必须比 min 属性大，并且不能超过 high 和 max；默认 low = min

当 value >= min && value < low 时，<meter> 就会显示低值的效果

high

高值区间的上限值；它必须比 max 属性小，并且不能低于 low 和 min；默认 high = max

当 value >= low && value < high 时，<meter> 就会显示高值的效果

optimum

用来表最佳取值，也就是指明哪一个取值范围是更好的；它必须介于 max 和 min 之间（min <= optimum <= max）

当 min <= optimum < low 时，min <= value <= low 为最佳值范围，默认为绿色；

low < value <= high 为警戒值范围，默认为橙色；

high < value < max 为危险值范围，默认为红色

<meter min="0" max="100" value="30" low="60" high="90" optimum="50"></meter>

<meter min="0" max="100" value="70" low="60" high="90" optimum="50"></meter>

<meter min="0" max="100" value="95" low="60" high="90" optimum="50"></meter>

当 low <= optimum <= high 时，low <= value <= high 为最佳值范围，默认为绿色；

min <= value < low 和 high < value <= max 为警戒值范围，默认为橙色

<meter min="0" max="100" value="30" low="60" high="90" optimum="70"></meter>

<meter min="0" max="100" value="70" low="60" high="90" optimum="70"></meter>

<meter min="0" max="100" value="95" low="60" high="90" optimum="70"></meter>

当 high < optimum <= max 时，high <= value <= max 为最佳值范围，默认为绿色；

low <= value < high 为警戒值范围，默认为橙色；

min <= value < low 为危险值范围，默认为红色

<meter min="0" max="100" value="30" low="60" high="90" optimum="95"></meter>

<meter min="0" max="100" value="60" low="60" high="90" optimum="95"></meter>

<meter min="0" max="100" value="90" low="60" high="90" optimum="95"></meter>