以下是一个简单的例子，演示如何使用 JavaScript 获取和操作与 <progress> 元素关联的 Progress 对象：
<!DOCTYPE html>
<html>
<head>
<title>Progress 对象示例</title>
</head>
<body>
<!-- 进度条 -->
<progress id="exampleProgress" value="50" max="100"></progress>
<!-- JavaScript 代码 -->
<script>
function updateProgressValue() {
// 获取 Progress 对象
var exampleProgress = document.getElementById('exampleProgress');
// 修改进度值
exampleProgress.value = 75;
// 在控制台打印修改后的进度值
console.log("修改后的进度值：" + exampleProgress.value);
}
function getProgressMaxValue() {
// 获取 Progress 对象
var exampleProgress = document.getElementById('exampleProgress');
// 获取最大值属性
var maxValue = exampleProgress.max;
// 在控制台打印最大值
console.log("最大值：" + maxValue);
}
</script>
<!-- 按钮触发 JavaScript 函数 -->
<button onclick="updateProgressValue()">更新进度值</button>
<button onclick="getProgressMaxValue()">获取最大值</button>
</body>
</html>
在这个例子中，我们创建了一个包含 <progress> 元素的 HTML 页面。通过 JavaScript，我们使用 document.getElementById 方法获取了与 <progress> 元素关联的 Progress 对象，并通过修改进度值和获取最大值的操作来演示对进度条的操作。点击页面上的按钮将触发相应的 JavaScript 函数。
请注意，这只是一个简单的演示，实际应用中可以根据需要使用不同的选择器方法来获取 <progress> 元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4425/HTML