掌握HTML：深入理解和应用 标签

<meter> 是 HTML5 的新增标签

用来显示已知访问的标量值，可以理解成进度条

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

效果

1
2
3
4
5
<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="10" 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 为危险值范围，默认为红色

    1
    2
    3
    4
    5
    <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 为警戒值范围，默认为橙色

    1
    2
    3
    4
    5
    <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 为危险值范围，默认为红色

    1
    2
    3
    4
    5
    <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>

伪元素

在现代浏览器下，<meter> 元素提供了许多伪元素

其中，Chrome 浏览器和 Safari 浏览器可以使用的伪元素比较多，Firefox 浏览器相对少一些

伪元素列表：

  • ::meter-bar：灰色背景条
  • ::meter-even-less-good-value：红色
  • ::meter-optimum-value：橙色
  • ::meter-suboptimum-value：绿色

使用时需要加上浏览器兼容前缀

meter-even-less-good-value、meter-optimum-value 和 meter-suboptimum-value 只会同时出现一个

浏览器兼容性

  • 数字表示该浏览器开始支持的版本

  • No 表示不支持

PC 端

PC 端 Chrome Edge Firefox Opera Safari
meter 6 18 16 11 6
min 6 18 16 11 6
max 6 18 16 11 6
value 6 18 16 11 6
low 6 18 16 11 6
high 6 18 16 11 6
optimum 6 18 16 11 6

移动端

移动端 Chrome Android Firefox Android Opera Android Safari IOS WebView Android
meter 18 16 11 10.3 No
min 18 16 11 10.3 No
max 18 16 11 10.3 No
value 18 16 11 10.3 No
low 18 16 11 10.3 No
high 18 16 11 10.3 No
optimum 18 16 11 10.3 No

使用

根据 <meter> 的特性，用来做密码强度显示是不错的，实现方案可以参考下面这位大佬的文章

引用站外地址
鑫空间,鑫生活
密码强度效果最佳实现

参考