HTML5 meter标签的使用
2017-11-13 16:49
246 查看
<!doctype html>
<html>
<dead>
<meta charset="UTF-8">
<style type="text/css">
#la{
width:200px;
}
</style>
<script>
function test(){
var kk = document.getElementById("la");
var cc = document.getElementById("cc");
kk.value=cc.value;
}
</script>
</dead>
<body>
<form oninput="test()"><!--使用表单的oninput事件使得meter的参数值随滑块值变化-->
<meter min="0" max="100" low="10" high="80" value="8" optimum="50" id="la"></meter>
<!--min max是valueq取值范围，low和high以及optimum是对value的判断，value处在不同的区间时，meter得颜色会不同-->
0<input id="cc" type="range" min="0" max="100" value="0">100
</form>
</body>
</html>
<html>
<dead>
<meta charset="UTF-8">
<style type="text/css">
#la{
width:200px;
}
</style>
<script>
function test(){
var kk = document.getElementById("la");
var cc = document.getElementById("cc");
kk.value=cc.value;
}
</script>
</dead>
<body>
<form oninput="test()"><!--使用表单的oninput事件使得meter的参数值随滑块值变化-->
<meter min="0" max="100" low="10" high="80" value="8" optimum="50" id="la"></meter>
<!--min max是valueq取值范围，low和high以及optimum是对value的判断，value处在不同的区间时，meter得颜色会不同-->
0<input id="cc" type="range" min="0" max="100" value="0">100
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html5 audio标签使用详解
- html5 <bdo>标签的使用方法
- 【初探HTML5之使用新标签布局】用html5布局我的博客页！
- HTML5基础10----HTML5块元素标签的使用
- 如何使用HTML5新增标签（一）
- HTML5中label标签对input元素标注的使用方法
- HTML5 标签语法变化和使用概念
- html5的a标签使用
- HTML5教程实例-Canvas标签-坐标变换与路径结合使用
- html5-svg标签使用基础二
- ios vue2.0使用html5中的audio标签不能播放音乐
- HTML5 embed 标签使用方法介绍
- HTML5标签使用的常见误区----转载
- IE8下HTML5标签的使用
- HTML5 中的新属性meter的使用
- HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
- HTML5 新增标签 及 不再使用标签
- HTML5 中的meter 标签的样式设置
- HTML5标签及使用方法描述
- Html5新标签的使用