html5中的meter标签改变颜色规则

一、meter标签改变颜色规则

meter 标签的max、min属性定义在最两边，low和high定义在中间。这样分割开了3个区：[min,low)、[low,high]，(high,max]。

最佳值 optimum 和 value 的不同决定了显示的颜色的不同。最佳值默认是1/2(min+max)。

规则：

和 optimum 值在同一个区间的 value 值，那么显示为绿色；
和 optimum 值不在同一个区间的 value 值，以optimum 所在的区间为中心，依次向左右两边的区间为黄色、红色。

注意：optimum所在区间如果是开区间，value取值为开区间的值是也是绿色。比如：optimum所在区间[min,low)，value值等于low时也是绿色。
规则具体解析如下：

最佳值 optimum所在区间是[min,low)，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；
最佳值 optimum所在区间是[low,high]，那么区间[low,high]绿色，(min,low]黄色，(high, max]黄色；
最佳值 optimum所在区间是(high,max]，那么区间[min,low]绿色，(low,high]黄色，(high,max]红色；

二、使用案例

<p>优区间划分：[0,60)，[60,90], (90,100]</p>
<p>最优59，值60<meter min="0" low="60" high="90" max="100" optimum="59" value="60"></meter></p>
<p>最优60，值60<meter min="0" low="60" high="90" max="100" optimum="60" value="60"></meter></p>
<p>最优60，值61<meter min="0" low="60" high="90" max="100" optimum="60" value="61"></meter></p>
<p>最优90，值89<meter min="0" low="60" high="90" max="100" optimum="90" value="89"></meter></p>
<p>最优90，值90<meter min="0" low="60" high="90" max="100" optimum="90" value="90"></meter></p>
<p>最优91，值90<meter min="0" low="60" high="90" max="100" optimum="91" value="90"></meter></p>

参考文章： HTML5 meter 标签理解，meter 变化颜色规则

html5中的meter标签改变颜色规则相关推荐

[html] html5中的meta标签http-equiv属性有什么作用？
[html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...
[html] html5中的meta标签renderer有什么作用？
[html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
[html] html5中的meta标签robots有什么作用？
[html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
html中form标签的作用style,HTML5中meta常用标签属性说明
HTML5中meta常用标签属性说明 IE 兼容模式,Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此标签加入到你的页面中: content属性 ...
ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本在里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...
html去掉nav的圆点,web前端分享HTML5中的nav标签
web前端分享HTML5中的nav标签,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a page that l ...
html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
html5中还有div吗,关于html5中的section标签与div标签的区别（内有实例）
摘要腾兴网为您分享:关于html5中的section标签与div标签的区别(内有实例),周公解梦,智学网,学习计时,完美root等软件知识,以及网上预约医院软件,字体预览软件,铁血联盟卷土重来,海量 ...
html中用来表示主题标签的是什么,HTML5中的article标签是什么？HTML5中的article元素用在什么地方？...
HTML5中的article标签是什么?HTML5中的article元素用在什么地方?本篇文章主要为大家解释了什么是HTML5中的article标签,article用在什么地方,还有HTML5中art ...

html5中的meter标签改变颜色规则

html5中的meter标签改变颜色规则相关推荐

最新文章

热门文章