HTML表单控件之meter

时间：6年前阅读：4599

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,我们将及时处理。

微信扫码关注

更新实时通知

HTML表单控件之meter

网友评论