本文通过实例展示了HTML5中Meter与Progress元素的应用，包括动态更新进度条及计量器值的功能。利用jQuery实现自动增加进度百分比，并响应点击事件调整计量器的数值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<meter max="100" min="0" low="30" high="60" optimum="29"></meter><br>
<progress id="objprogress" value="0" max="100"></progress><span>0</span>%
<script>
$(document).ready(function(e) {
$("meter").click(function(){
$(this).val(Number($(this).val())+10);
});
setInterval(function(){
$("span").get(0).innerHTML=($("#objprogress").val()+10);
$("#objprogress").val(Number($("#objprogress").val())+10);
},1000);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<meter max="100" min="0" low="30" high="60" optimum="29"></meter><br>
<progress id="objprogress" value="0" max="100"></progress><span>0</span>%
<script>
$(document).ready(function(e) {
$("meter").click(function(){
$(this).val(Number($(this).val())+10);
});
setInterval(function(){
$("span").get(0).innerHTML=($("#objprogress").val()+10);
$("#objprogress").val(Number($("#objprogress").val())+10);
},1000);
});
</script>
</body>
</html>
扫一扫
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
