以下是一个简单的例子，演示如何使用 onprogress 事件：
<!DOCTYPE html>
<html>
<head>
<title>onprogress Event Example</title>
</head>
<body>
<progress id="myProgress" max="100" value="0"></progress>
<br>
<audio id="myAudio" controls onprogress="handleProgress()">
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<script>
// 处理媒体下载进度事件
function handleProgress() {
var audio = document.getElementById("myAudio");
var progress = document.getElementById("myProgress");
if (audio.buffered.length > 0) {
// 获取已下载的时间范围
var bufferedTime = audio.buffered.end(0);
// 获取媒体总时长
var duration = audio.duration;
// 计算下载进度百分比
var progressPercentage = (bufferedTime / duration) * 100;
// 更新进度条的值
progress.value = progressPercentage;
}
}
</script>
</body>
</html>
在这个例子中，<progress> 元素用于显示媒体下载的进度。<audio> 元素附加了 onprogress 事件，并调用了 handleProgress 函数。在函数中，我们首先获取 <audio> 和 <progress> 元素，然后通过 audio.buffered 属性获取已下载的时间范围。通过计算已下载的时间占总时长的百分比，更新 <progress> 元素的值。
这个事件通常用于显示媒体下载的进度，以提供更好的用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/6246/JavaScript 和 HTML DOM