Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

meter控件

  现代浏览器提供了一个meter控件(IE11不支持)。它的结构类似progress控件,都是设置一个max参数,使用value来指定显示的结果。但它比progress多了几个参数,还可以设置min表示最低量,以及lowhighoptimum,这些参数来描述数据的状态。
  首先,如果没有设置其它参数,只有minmax的话它就和普通的进度条一样。 <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>

  其实我觉得这个控件非常鸡肋,如果真要用到类似的功能我也会考虑自己写。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^