CSS任務(wù)進(jìn)度條是網(wǎng)頁設(shè)計(jì)中經(jīng)常使用的一種元素，它可以幫助用戶更直觀地了解當(dāng)前任務(wù)的完成情況和進(jìn)度。下面我們將介紹如何使用CSS來實(shí)現(xiàn)一個(gè)簡單的任務(wù)進(jìn)度條：

/* CSS樣式 */
.task-progress {
height: 20px;
background-color: #f2f2f2;
position: relative;
border-radius: 10px;
}
.task-progress-bar {
height: 100%;
background-color: #4caf50;
position: absolute;
border-radius: 10px;
}
.task-progress-text {
font-size: 16px;
font-weight: bold;
color: #333;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先創(chuàng)建一個(gè)div元素，并設(shè)置它的高度為20px，背景顏色為灰色，圓角為10px，命名為.task-progress。然后在.task-progress中創(chuàng)建一個(gè)子元素div，命名為.task-progress-bar，用來表示任務(wù)的進(jìn)度。.task-progress-bar元素的高度為100%，寬度通過JS動(dòng)態(tài)計(jì)算并設(shè)置，背景顏色為綠色，也有圓角為10px。最后創(chuàng)建一個(gè)span元素，命名為.task-progress-text，用于在進(jìn)度條中心顯示任務(wù)的完成百分比，樣式為加粗、居中、黑色。

0%

最后，我們需要編寫JavaScript代碼，用來根據(jù)任務(wù)的完成情況來動(dòng)態(tài)改變進(jìn)度條的寬度和顯示的完成百分比：

// JavaScript代碼
var progressBar = document.querySelector('.task-progress-bar');
var progressText = document.querySelector('.task-progress-text');
var currentProgress = 0; // 當(dāng)前完成百分比
// 模擬任務(wù)完成過程
setInterval(function() {
currentProgress += 10; // 每次增加10%
progressBar.style.width = currentProgress + '%'; // 設(shè)置進(jìn)度條寬度
progressText.innerText = currentProgress + '%'; // 顯示完成百分比
}, 1000);

這段JavaScript代碼模擬了任務(wù)的完成過程，每秒鐘增加10%的完成量，然后動(dòng)態(tài)改變進(jìn)度條的寬度和顯示的完成百分比。

通過CSS樣式和JavaScript代碼的結(jié)合，我們就可以輕松地實(shí)現(xiàn)一個(gè)簡單的任務(wù)進(jìn)度條了。