注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

html5 <meter>标签详解  

2014-09-23 18:09:15|  分类: html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<meter>标签定义度量衡。仅用于已知最大和最小值的度量。
有以下属性:
属性描述
highnumber定义度量的值位于哪个点,被界定为高的值。如果该属性值小于low属性值,那么把low属性值视为high属性值,如果该属性值大于max属性值,那么把max属性值视为high属性的值
lownumber定义度量的值位于哪个点,被界定为低的值。必须小于或等于high属性的值,如果low属性值小于min属性值,那么浏览器把min属性的值视为low属性的值。
maxnumber定义最大值。默认值是 1。如果设定该属性值小于min属性的值,那么浏览器会把min设置为最大值。
minnumber定义最小值。默认值是 0。值不可小于0。
optimumnumber

定义什么样的度量值是最佳的值。

如果该值高于 "high" 属性,则意味着值越高越好。

如果该值低于 "low" 属性的值,则意味着值越低越好。

属性值必须在min属性值与max属性值之间,可以大于high属性值。

valuenumber定义度量的值。默认为0,可以给该属性指定浮点数小数值。

根据各值的不同 显示 绿、黄、红三种颜色(默认是绿色)。

详解:
1、 value 属性必须有;只有value属性是 相当于min=0;max=1,所以 value 大于等于1 相当于为全部
html5 meter标签详解 - 珠玛雅 - 左岸  value分别为:0.25  和4;
2、optimum需要与high或者low或者low加high配合使用;
      当optimum 与high配合时 :

如果 optimun大于high, 
 value< high  为黄色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>=high  为绿色html5 meter标签详解 - 珠玛雅 - 左岸

        如果 optimun小于high,  
value< =high  为绿色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>high  为黄色html5 meter标签详解 - 珠玛雅 - 左岸

    当optimum 与low配合时:
如果 optimun大于low 
value>low  为黄色 html5 meter标签详解 - 珠玛雅 - 左岸 
value<=low  为绿色html5 meter标签详解 - 珠玛雅 - 左岸
        如果 optimun小于low
 value< =low  为绿色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>low  为黄色html5 meter标签详解 - 珠玛雅 - 左岸

    当optimum 与low、high配合时:

如果 optimun大于high
 value< low 为红色  html5 meter标签详解 - 珠玛雅 - 左岸
 value>=low   value< high 为黄色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>=high 为绿色html5 meter标签详解 - 珠玛雅 - 左岸

        如果 optimun小于low 
value< =low  为绿色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>low   value< =high  为黄色html5 meter标签详解 - 珠玛雅 - 左岸
 value>high为红色  html5 meter标签详解 - 珠玛雅 - 左岸

      如果high> optimun>low 
value< low 或者value>high 为黄色 html5 meter标签详解 - 珠玛雅 - 左岸
 value>=low   value< =high  为黄色html5 meter标签详解 - 珠玛雅 - 左岸 

浏览器支持:

html5 meter标签详解 - 珠玛雅 - 左岸
 
    -webkit 内核下 可以 用伪类修改默认样式:实例如下
CSS代码:
.deal meter { -webkit-appearance: none; }
.deal ::-webkit-meter-bar {
    height: 1em;
    background: white;
    border: 1px solid black;
}
.deal ::-webkit-meter-optimum-value { background: green; }	/**/
.deal ::-webkit-meter-suboptimum-value { background: orange; }	/* 凑合 */
.deal ::-webkit-meter-even-less-good-value { background: blue; }	/* 糟糕 */

.deal ::-moz-meter-bar {
    background: rgba(0,96,0,.6);
}
HTML代码:
<p>
    默认的:<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
    处理的:<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
 
 
 
  评论这张
 
阅读(49)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017