广告
文章导航

HTML <meter> 计量条

2019-4-14 15:31| 作者: admin| 查看: 149| 评论: 0|来自: 蚂蚁部落

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

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

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

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

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

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  计量条演示:<br/>
  <meter value="20"  max="100"></meter>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154332w1tgfxaqlokgaktp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

<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岁明显处罚较轻。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  计量条演示:<br/>
  <meter></meter>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154400cywuy0bz7aojj0au.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码说明如下:

(1).value值默认为0。

(2).min默认为0,max默认为1。

(3).low默认为0,high默认为1。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  计量条演示:<br/>
  <meter value="1"></meter>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154428t5mmiceg7i5irur1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码说明如下:

(1).value值为1。

(2).计量条已经满格,这也证明了max默认值为1。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  计量条演示:<br/>
  <meter min="10" low="30" high="80" max="100" value="90"></meter>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/14/154453pc08u94j9tjup92a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

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

考虑到文章的篇幅问题,本文不再介绍,具体可以参阅HTML <meter> 颜色规则一章节。

如果有关于本文的相关建议或者意见可以在文章底部留言,本站会第一时间回复。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部