HTML5新控件 - 计量条<meter>

最新推荐文章于 2022-07-10 17:17:50 发布
最新推荐文章于 2022-07-10 17:17:50 发布
阅读量819 收藏
点赞数
分类专栏： HTML5/CSS3 文章标签： html5 控件 计量条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014063717/article/details/50914642
版权

计量条<meter>外观和进度条<progress>有点类似，但作用不同。它表示的是某种计量，因此也被称作计量器。<meter>元素的值通常会对应现实中的某个值（比如天数，数量，金钱等）

1，计量器需要设置最大和最小值（通过max和min属性）

这里写图片描述

<meter value="50" min="10" max="70" />

2，使用low和high属性表示“过低”或“过高”值
可以看到当值过高或过低的时候，计量条变为黄色。

这里写图片描述

<meter value="50" min="10" low="30" high="40" max="70"/>
沈成才
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html-你不知道的＜meter＞标签
liuhao9999的博客
06-24 399
html-你不知道的标签
HTML5 progress和meter控件_动力节点Java学院整理
09-28
`<meter>` 元素则用作一种计量条，适合显示如温度、重量、电量等量化的信息。它同样有`value`、`min`、`max`等属性，但还额外包含`low`、`high`和`optimum`这些用于定义范围和理想值的属性。这些属性可以帮助我们...
meter标签修改样式
betty_zhou0807的博客
04-24 1483
.deal ::-webkit-meter-bar { height: 1.5em; background:linear-gradient(to bottom, #ddd, #837C7C); } .deal ::-webkit-meter-optimum-value { background:linear-gradient(to bottom, #ddd, #51a351);} ...
meter进度条 不同颜色
秋叶哈哈宋梦辉
07-23 1246
<meter max="100" min="0" high="66" low="33" optimum="80" value="67"></meter><br> 其中optimum是重要的一点 定义了什么样的度量值是最佳的值 一般应设置optimum大于high,这样可以起到一个效果 高于 high 的 value 值会显示绿色 低于high的值会显示红色 注意:即使value的值此时没有大...
HTML meter控件
歪脖先生的博客
04-13 469
meter控件meter控件用来表示已知范围，且可度量的等级标量或分数值，如考试成绩等。&lt;meter value="85" min="0" max="90" low="10" high="90" optimum="10"&gt;85&lt;/meter&gt;其中，value属性规定标量的实际测量值，如果不指定，默认为0；min属性规定标量的最小值，如
LVGL 8.2 meter控件实现模拟时钟
mygod2008ok的专栏
07-10 4203
LVGL 8.2 meter控件实现模拟时钟
使用HTML开发商业网站-表单控件-select课件.pptx
07-10
在众多的表单元素中，`<select>` 控件用于创建下拉列表，也就是我们常说的下拉菜单。这个控件常用于提供一系列预设的选项供用户选择，比如在注册页面上选择省份、城市或者在调查问卷中选择喜好。 **基本语法：** `...
C#+List+GridControl实现主从表嵌套
08-31
本篇将深入探讨如何利用`C#`中的`List<T>`集合类以及DevExpress的`GridControl`控件实现主从表的嵌套显示，这在数据库操作和数据可视化中非常常见。 `List<T>`是.NET Framework中`System.Collections.Generic`命名...
ui5-cc-md:ui5自定义控件将github风格的markdown渲染为html
05-10
UI5自定义控件ui5-cc-md 这个名称空间包含一个自定义控件，该控件呈现常规+带有github风格的Markdown内容，可以以字符串形式提供，也可以从文件中提供。 它输出纯HTML，可以将其包含在XML视图中。 安装 $ > yarn ...
html5中的meter标签改变颜色规则
c11073138的博客
04-03 8116
一、meter标签改变颜色规则 meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、[low,high]，(high,max]。最佳值 optimum 和 value 的不同决定了显示的颜色的不同。最佳值默认是1/2(min+max)。规则：和 optimum 值在同一个...
HTML5 progress和meter控件
xyjikl
07-05 1589
HTML5 progress和meter控件 　　在HTML5中，新增了progress和meter控件。progress控件为进度条控件，可表示任务的进度，如Windows系统中软件的安装、文件的复制等场景的进度。meter控件为计量条控件，表示某种计量，适用于温度、重量、金额等量化的表现。 目录 1.  进度条 　　1.1 特性 　　1.2 示例 2
HTML5进度条和度量器
qq_42309685的博客
08-18 400
HTML5进度条和度量器标签 进度条标签<progress>有两个参数：value和max 度量器标签参数很多,value max, min, low, hign head <!-- IE低版本浏览器兼容HTML5 --> <!--if lte ie 8> <script src="https://cdn.bootcss.com/html...
表单元素之output元素、度量条、进度条、fieldset、legend元素
yin_991的博客
10-28 461
表单元素之output元素、度量条、进度条、fieldset、legend元素
HTML5 中的新属性meter的使用
zbq764522533的博客
07-28 2719
属性 值 描述 form 属性" style="margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-style:initial; border-bottom-style:solid; border-left-style:initial; bor
HTML5＜meter＞标签
allway2的博客
02-07 1735
描述 该<meter>元素表示已知范围内的标量测量值或分数值。这也称为量规。 句法 <meter>标签的基本语法如下： HTML / XHTML:<metervalue="5">...</meter> 下面的示例显示了正在运行的<meter>标签。 例子 <!DOCTYPE html> <html lang="en"> <head> <title>Exa...
html5中的meter标签度量衡如何改变颜色
蒲小若的博客
07-30 1万+
meter度量衡如何改变颜色： 在meter中要想改变颜色，需要用到五个值，分别是：min（最小值）、max（最大值）、low、high、value和optimum，其中前四个值会把整个进度划分成3区间，   绿色：当value和optimum值在一个区间时，它就会呈现出绿色。 黄色：当optimum在high和max之间的时候，value在low和high之间，它就会呈现出黄   色
html怎么设置数据条的颜色,echarts柱状图（柱条颜色渐变，多条数据显示指定数据数）...
weixin_35125597的博客
06-10 675
(上一篇都宗前断和使近喜，端的滚用近喜，端的滚用echarts饼图与本页例子代码可在github(https://github.com/applebring/echarts-)上下载)--本打算与上一篇写一块，为防止篇幅过长分开写，echarts柱状图实现柱条渐变以及显示柱条数量器的功久含请业屏随气域实控近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后的求务蔽机风或现制近的时能后...
HTML+CSS+JavaScript简易教程
热门推荐
_TFBoy的小茶馆
03-22 3万+
1 Web(万维网) web原理：服务器和客户端（浏览器）之间的对话 客户端：连接到服务器并发送请求（一般指浏览器） 服务器：运行着服务器软件，根据请求提供页面（就像一个服务员一样）。永远在线。 url: Uniform Resourse Locator, 统一资源定位符。也叫URI, Uniform Resourse Identifier, 统一资源标识符。URL一般以www开头。 ...
如何使用card控件里的图片具有设置地图中心点坐标功能？function setMapCente<body> <div class="row"> <div class="col"> <div id="baiduMap"></div> <script type="text/javascript" class="map"> var map = new BMap.Map("baiduMap"); map.centerAndZoom(new BMap.Point(2.33269, 48.863727), 13); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("巴黎"); map.enableScrollWheelZoom(true); </script> </div> </div> <div class="row " style="padding:1% 10% 0% 10% "> <div class="col-3 "> <div class="box1"> <div class="card "><img src="img/Q安纳西.jpeg "> <a onclick="map.centerAndZoom(new BMap.Point(2.33269, 48.863727), 13);"> <div class="card-body "> <p4 class="card-text mt-3 ">安纳西 ></p4> </div> </a> </div> </div> </div> <div class="col-3 "> <div class="box1"> <div class="card "><img src="img/Q安纳西.jpeg "> <a href="#"> <div class="card-body "> <p4 class="card-text mt-3 ">安纳西 ></p4> </div> </a> </div> </div> </div> <div class="col-3 "> <div class="box1"> <div class="card "><img src="img/Q安纳西.jpeg "> <a href="#"> <div class="card-body "> <p4 class="card-text mt-3 ">安纳西 ></p4> </div> </a> </div> </div> </div> <div class="col-3 "> <div class="box1"> <div class="card "><img src="img/Q安纳西.jpeg "> <a href="#"> <div class="card-body "> <p4 class="card-text mt-3 ">安纳西 ></p4> </div> </a> </div> </div> </div> </div> </body>r(lat, lng) { var newCenter = new google.maps.LatLng(lat, lng); map.setCenter(newCenter); }
最新发布
06-01
<p4 class="card-text mt-3 ">安纳西 ></p4> </div> </a> </div> </div> </div> <!-- 其他card控件 --> </div> </body> ``` 在上面的示例代码中，我们首先定义了一个名为`setMapCenter()`的JavaScript函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值