18
2019
10

HTML表单控件之meter

meter元素用于显示剩余容量或剩余库存(常用于表示状态)

  [注意]IE浏览器及safari浏览器不支持

【属性】

  form      规定meter元素所属的一个或多个表单

  high      规定被视作高的值的范围

  low        规定被视作低的值的范围

  max      规定范围的最大值

  min       规定范围的最小值

  optimum   规定度量的最优值

  value      规定度量的当前值(必需)

  [注意]min 小于 low 小于 high 小于 max

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="btn" type="button" value="增加库存">
库存量:<meter id="test" value="10" min="0" low="30" optimum="60" high="80" max="100" ></meter>
<script>
var oTimer;
btn.onclick = function(){
    if(oTimer){
        return;
    }
    oTimer = setInterval(function(){
        test.value++;
        if(test.value >= test.max){
            clearInterval(oTimer);
        }
    },50);     
};
</script>
	</body>
</html>

如果meter标签的value属性,取值为小数,如0.3,且没有max属性值时,则颜色块显示为宽高的30%

<meter value="0.3"></meter>

原文链接:https://www.qiquanji.com/post/7067.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。