使用了
<progress>标签来实现进度条。进度条的
max属性设置为100表示满进度为 100%。按下按钮时，通过 JavaScript 将
progress的value属性增加 10，从而更新进度条的进度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 原生进度条示例</title>
</head>
<body>
<h2>进度条示例</h2>
<!-- HTML5 原生进度条 -->
<progress id="progressBar" value="0" max="100"></progress>
<p>进度: <span id="progressValue">0</span>%</p>
<button onclick="updateProgress()">增加进度</button>
<script>
function updateProgress() {
const progressBar = document.getElementById('progressBar');
const progressValue = document.getElementById('progressValue');
if (progressBar.value < 100) {
progressBar.value += 10; // 每次增加 10%
progressValue.textContent = progressBar.value;
}
}
</script>
</body>
</html>