js实现播放进度条

以下是JS实现播放进度条的代码示例：

HTML:

<div id="progress-bar"> <div id="progress"></div> </div> 

CSS:

#progress-bar { width: 300px; height: 10px; background-color: #ccc; } #progress { width: 0; height: 100%; background-color: #00f; } 

JS:

// 获取进度条元素 var progressBar = document.getElementById('progress'); // 获取音频或视频元素 var media = document.getElementById('my-audio-or-video'); // 更新进度条的函数 function updateProgressBar() { // 计算当前进度 var progress = (media.currentTime / media.duration) * 100; // 更新进度条宽度 progressBar.style.width = progress + '%'; } // 监听音频或视频的时间更新事件 media.addEventListener('timeupdate', updateProgressBar); 

请注意，在上面的示例中，您需要将 #my-audio-or-video 替换为您实际使用的音频或视频元素的 ID。此外，上述代码仅实现了进度条的显示，您可能还需要添加其他功能，如用户交互控制播放进度等。