隨著Web應(yīng)用程序的增長(zhǎng)，交互性也變得越來(lái)越重要。當(dāng)需要向用戶(hù)顯示音頻或視頻時(shí)，進(jìn)度條成為了一種重要的控件。在CSS中，我們可以輕松地創(chuàng)建一個(gè)可拖動(dòng)的點(diǎn)擊進(jìn)度條。

HTML:
CSS:
.progress-bar {
width: 300px;
height: 6px;
background-color: #ddd;
border-radius: 10px;
cursor: pointer;
position: relative;
}
.progress {
width: 0%;
height: 100%;
background-color: blue;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}

在上面的示例中，我們創(chuàng)建了一個(gè)具有灰色背景和藍(lán)色進(jìn)度的進(jìn)度條。默認(rèn)情況下，進(jìn)度條的寬度為0%。鼠標(biāo)在進(jìn)度條上時(shí)，將會(huì)改變進(jìn)度條的寬度并顯示百分比。我們可以通過(guò)以下CSS來(lái)實(shí)現(xiàn)這一點(diǎn)：

.progress-bar:hover .progress {
display: block;
}
.progress-bar:hover:before {
content: attr(data-progress);
display: inline-block;
position: absolute;
top: -25px;
left: 0;
width: 100%;
font-size: 12px;
text-align: center;
}
.progress-bar:hover:after {
content: '';
display: block;
position: absolute;
top: -5px;
left: calc(100% - 10px);
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #888;
}

在上面的CSS中，我們通過(guò):hover來(lái)定義進(jìn)度條的鼠標(biāo)懸停狀態(tài)。我們還通過(guò):before和:after偽元素添加了一個(gè)指示百分比的標(biāo)簽和一個(gè)箭頭。我們還需要為進(jìn)度條添加一些JavaScript代碼：

const progressBar = document.querySelector('.progress-bar');
progressBar.addEventListener('click', function(e) {
const progress = document.querySelector('.progress');
const offsetX = e.pageX - this.offsetLeft;
const width = this.offsetWidth;
const percent = offsetX / width * 100;
progress.style.width = percent + '%';
progress.setAttribute('data-progress', percent + '%');
});

在這里，我們將進(jìn)度條的點(diǎn)擊事件綁定到.progress-bar元素上，并計(jì)算鼠標(biāo)的偏移量。我們還需要將進(jìn)度條的寬度設(shè)置為百分比，并將其存儲(chǔ)在[data-progress]屬性中，以便在鼠標(biāo)懸停時(shí)使用。現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)可拖動(dòng)的點(diǎn)擊進(jìn)度條，用戶(hù)可以方便地控制音頻或視頻的播放進(jìn)度了。