要在进度条中间添加百分比的显示，您可以使用另一个元素来展示百分比，并通过JavaScript动态更新其内容。
首先，在HTML中，为进度条容器添加一个额外的子元素用于显示百分比：
<div id="progress-bar-container">
<div id="progress-bar"></div>
<span id="progress-percent">0%</span>
</div>
接下来，在CSS中为这个新的元素添加样式以使其居中显示，并调整进度条和百分比之间的间距：
#progress-percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
然后，在JavaScript中编写逻辑来更新百分比的内容。在updateProgressBar()函数中，除了更新进度条的宽度，还需要更新百分比的文本内容：
const progressBar = document.getElementById('progress-bar');
const progressPercent = document.getElementById('progress-percent');
function updateProgressBar(progress) {
progressBar.style.width = progress + '%';
progressPercent.textContent = progress + '%';
}
// 示例：每秒增加10%的进度直到达到100%
let progress = 0;
const intervalId = setInterval(() => {
if (progress >= 100) {
clearInterval(intervalId);
return;
}
progress += 10;
updateProgressBar(progress);
}, 1000);
现在，当进度条更新时，百分比文本也会相应地更新，并始终位于进度条中间。
请注意，以上示例只是基础实现，您可以根据需要自定义样式和进一步改进。
内容由零声教学AI助手提供，问题来源于学员提问
