HTML <meter> 计量条

小灰灰 2020-05-15 18:14 675阅读 0赞

HTML `<meter>` 计量条

<meter>元素是HTML5新增，用来显示已知数据范围内标量值，通常用于指示当前数据处于某种状态。

上述阐述太晦涩了，原本很容易理解的概念一旦套上高大上的概念就让人有点迷茫。

计量条对于绝大度数朋友应该都不陌生，举一个简单的例子，竞技游戏中，操作的人物通常有血条或者魔法条。

当血量或魔法量较多时，血条或者魔法条呈现比较舒适的绿色，当血量或者魔法量下降到指定量之下，呈现黄色。

如果血量或者魔法量再降低到指定量之下后，血条或者魔法条会呈现红色显示，本文要介绍的计量条大致如此。

此标签当前的浏览器兼容性也不错，并且随着时间的推移和软硬件的进步，支持度会更好，以实测为准。

首先通过一段代码实例对其有一个直观的感受：

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  计量条演示：<br/>
  <meter value="20"  max="100"></meter>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1589566440419.png)

<meter>元素具有如下几个主要属性：

（1）.max：数值类型，设置计量条的最大值，如果省略此值，默认为1。

（2）.min：数值类型，设置计量条的最小值，必须小于max，如果省略此值，默认值为0。

（3）.value：数值类型，设置计量条的当前值，必须介于min与max之间。

（4）.low：数值类型，设置过低阈值，值不小于min，且不大于high与max，默认值为min。

（5）.high ：数值类型，设置过高阈值，值大于min与low，且小于max值，默认值max。

（6）.optimum：设置最佳值，值介于min与max之间。

阈值是一个临界值，高于此值或者低于此值都会有一个状态明显转变。

比如18岁是一个阈值，大于等于18岁，如果犯罪的话可能就有较为严重的刑事处罚，小于18岁明显处罚较轻。

**代码实例如下：**

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  计量条演示：<br/>
  <meter></meter>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1589566424873.png)

上述代码说明如下：

（1）.value值默认为0。

（2）.min默认为0，max默认为1。

（3）.low默认为0，high默认为1。

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  计量条演示：<br/>
  <meter value="1"></meter>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1589566406198.png)

上述代码说明如下：

（1）.value值为1。

（2）.计量条已经满格，这也证明了max默认值为1。

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  计量条演示：<br/>
  <meter min="10" low="30" high="80" max="100" value="90"></meter>
</body>
</html>
```

代码运行效果截图如下：
![](/images/1589566383322.png)

可以看到计量条呈现了黄色，与前面的绿色不同。

这是计量条的一大特点之一，当前值超过一定的阈值会呈现出不同的颜色。

和文章开头所说的魔法值和血量具有类似的原理，optimum属性值对于计量条当前呈现的颜色值也会有影响。

计量条本身是很好理解的，唯一的难点可能就是掌握计量条的颜色呈现规则。

发表评论取消回复

表情：

评论列表（有 0 条评论，675人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5小白——HTML5文本（进度progress，刻度meter，预定义格式pre）

<!DOCTYPE html> <html> <head> <title>进度条</title> </head> <body>

约定不等于承诺〃/ 2023年06月25日 08:29/ 0 赞/ 89 阅读

相关选择题【计量】

1.在下列各种数据中，哪类不常用于计量经济分析？ A.时间序列数据 B.观测数据 C.实验数据 D.横截面数据 C ![在这里插入图片描述][waterm

﹏ヽ暗。殇╰゛Y/ 2023年01月20日 11:45/ 0 赞/ 14 阅读

相关 Apache Pivot教程 -- ProgressBar -- Meter

Apache Pivot教程今天讲一讲Apache Pivot中的ProgressBar中的一种，Meter package meter_java;

秒速五厘米/ 2022年12月02日 04:10/ 0 赞/ 84 阅读

相关计量单位数据

文章目录 I 、计量单位数据 1.1 从json文件读取数据 1.2 json 数据 I 、计量单位数据 1.1 从json

深碍√TFBOYSˉ_/ 2022年10月07日 14:54/ 0 赞/ 116 阅读

相关 Meter-Bus/M-Bus收发器

提供Meter-Bus/M-Bus收发器的半导体厂商包括德州仪器（TI）、安森美（ON)。 [http://blog.csdn.net/zoomdy/article/deta

红太狼/ 2022年09月26日 15:45/ 0 赞/ 86 阅读

相关 HTML滚动条

滚动条第一种方式： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

浅浅的花香味﹌/ 2022年07月11日 01:50/ 0 赞/ 240 阅读

相关计算机存储计量单位

字节 > 8个二进制位为一个字节(B)，最常用的单位。计算机存储单位一般用B，KB，MB，GB，TB，PB，EB，ZB，YB，BB来表示，它们之间的关系是： > 1B

￡神魔★判官ぃ/ 2022年06月01日 14:20/ 0 赞/ 181 阅读

相关【metrics-meters】使用meters监控接口tps

1. 依赖 <dependency> <groupId>io.dropwizard.metrics</groupId>

快来打我*/ 2022年04月04日 12:58/ 0 赞/ 162 阅读

相关 003-计量单位

最基本的计量单位：比特（bit、位）：它被认为是计算机当中最小的单位。字节（byts）：1字节=8比特常见的单位及其转换关系： 1B=8b 1KB=1024

小鱼儿/ 2022年01月07日 15:11/ 0 赞/ 228 阅读

相关 HTML <meter> 计量条

< meter>元素是HTML5新增，用来显示已知数据范围内标量值，通常用于指示当前数据处于某种状态。上述阐述太晦涩了，原本很容易理解的概念一旦套上高大上的概念就...

小灰灰/ 2020年05月15日 18:14/ 0 赞/ 676 阅读