HTML5中，百分數進度條是一種非常常用的網頁效果，通過它可以展示出當前任務的進度百分比，讓用戶更直觀地了解任務的完成情況。下面是一個使用HTML5實現的百分數進度條的代碼示例：
<html>
<head>
<title>HTML5百分數進度條示例</title>
<script>
function updateProgressBar(progress) {
var progressBar = document.getElementById('progress_bar');
if (progressBar) {
progressBar.value = progress;
}
var progressText = document.getElementById('progress_text');
if (progressText) {
progressText.innerHTML = progress + '%';
}
}
</script>
</head>
<body>
<h1>HTML5百分數進度條示例</h1>
<progress id="progress_bar" value="0" max="100"></progress>
<p id="progress_text">0%</p>
<button onclick="updateProgressBar(25)">完成25%</button>
<button onclick="updateProgressBar(50)">完成50%</button>
<button onclick="updateProgressBar(75)">完成75%</button>
<button onclick="updateProgressBar(100)">完成100%</button>
</body>
</html>在這個示例中，我們使用了HTML5中的<progress>元素來實現百分數進度條，通過設置其value屬性可以改變進度條的進度。同時，我們還添加了一個用于顯示當前進度的<p>元素，通過內部HTML的形式展示出當前進度百分比。最后，我們還加入了一些按鈕來模擬任務完成的不同進度，并通過調用JavaScript函數來更改進度條的進度和顯示文本。