HTML5使用＜progress＞进度条、＜meter＞刻度条

1、<progress>进度条

定义进度信息使用的是 progress 标签。它表示一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成，也可以用0到某个最大数字（如：100）之间的数字来表示准确的完成情况（如：进度百分比）。

progress 标签的属性：

属性	说明
value	表示已经完成了多少工作量
max	表示总共有多少工作量

【实例】在网页中使用 progress 标签添加进度条。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用进度条</title><script type="text/javascript">function button_onclick() {for (var i = 0; i <= 100; i++)updateProgress(i);}function updateProgress(newValue) {var progressBar = document.getElementById('p');progressBar.value = newValue;document.getElementsByTagName('span')[0].textContent = newValue;}</script>
</head><body><section><h2>progress元素的使用实例</h2><p>完成百分比: <progress id="p" max=100></progress><span>0</span>%</p><input type="button" onClick="button_onclick()" value="请点击" /></section>
</body></html>

执行结果：

2、<meter>刻度条

定义刻度信息使用的是 meter 标签，该标签用来表示规定范围内的数量值，如磁盘使用量比例、关键词匹配程度等。

需要注意的是，meter 标签不可以用来表示那些没有已知范围的任意值，例如：重量、高度，除非已经设定了这些值的范围。

meter 标签的属性：

属性	说明
value	当前标量的实际值
min	当前标量的最小值
max	当前标量的最大值
low	当前标量的低值区
high	当前标量的高值区
optimum	最佳值，其范围在最小值与最大值区间当中

【实例】在网页中使用 meter 标签添加刻度条。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>使用刻度条</title>
</head>
<body><p>磁盘使用量：<meter value="50" min="0" max="160">50/160</meter> GB</p><p>你的得分是：<meter value="91" min="0" max="100" low="10" high="90" optimum="100"></meter> A+</p>
</body>
</html>

执行结果：