HTML5之meter标签的应用，类似进度条-qxy

文章分类

文章存档

2012年（62）

我的朋友

相关博文

分类：系统运维

2012-07-13 11:00:42

meter标签：
此标签与标签差不多，它主要表现规定范围内的数量值，例如磁盘的食用量，对某个候选者人数占总投票人数的比例值等，如下图：
W3Cfuns.com - HTML5每日一练之meter标签的应用

meter有六个属性：

属性名称	描述
value	在元素中表现出来的实际数量值。该属性缺省值为0，可以给该属性指定浮点数小数值。
min	指定规定范围时允许使用的最小值，该属性缺省值为0，设置最小值时，值不可小雨0。
max	指定规定范围时允许使用的最大值，如果设定该属性值小于min属性的值，那么浏览器会把min设置为最大值。max属性缺省值为1。
low	规定范围的下限值，必须小于或等于high属性的值。同样的，如果low属性值小于min属性值，那么浏览器把min属性的值视为low属性的值。
high	规定范围的上限值，如果该属性值小于low属性值，那么把low属性值视为high属性值，同样的，如果该属性值大于max属性值，那么把max属性值视为high属性的值。
optimum	设置最佳值，属性值必须在min属性值与max属性值之间，可以大于high属性值。

案例：

点击(此处)折叠或打开

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练meter标签的应用</title>
</head>
<body>
<h1>W3Cfuns-HTML5每日一练meter标签的应用</h1>
<p>空间剩余大小：<meter min="0" max="1024" value="600">600/1024</meter>600/1024 GB</p>
<p>您的得分是：<meter min="0" max="100" low="60" high="90" optimum="100" value="91">91分</meter>91分</p>
</body>
</html>

给meter定义样式并通过JS来控制显示的案例：
附件下载：

(1.65 KB, 下载次数: 130)

阅读(1701) | 评论(0) | 转发(1) |

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们