现代浏览器提供了一个meter控件（IE11不支持）。它的结构类似progress控件，都是设置一个max参数，使用value来指定显示的结果。但它比progress多了几个参数，还可以设置min表示最低量，以及low、high、optimum，这些参数来描述数据的状态。 首先，如果没有设置其它参数，只有min和max的话它就和普通的进度条一样。 运行

<meter min="0" max="100"></meter> <script> var meter=document.querySelector("meter"); setInterval(function(){ meter.value++; },50); </script> 如果是一个格斗游戏的血条呢？最佳状态这个血条当然是满的，所以optimum设置到max，表示最佳状态是这个。然后血量变低，但还不至于快死的状态可以设置上high。最后当血量进入临界状态，快死的时候设置到low上。这个控件的颜色会随着其状态的不同而改变。 运行

<meter min="0" max="100" low="20" high="50" optimum="100"></meter> <script> var meter=document.querySelector("meter"); meter.value=100; setInterval(function(){ meter.value--; },50); </script>