H5 progress标签异用

马黑黑 · 发表于 2022-5-5 22:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

progress标签是真的可以用来做进度条，因为它就是进度条，但我们今天把它当成一个动态的东东用来做个audio的播放暂停开关，不属于正当用法，所以叫做异用。

先看代码：

<style>
progress {
cursor: pointer;
width: 100px;
}
</style>
<progress id="prg" max="100"></progress>
<script>
let flag = true;
let prg = document.querySelector('#prg');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/11/f74ec9719908ab7a986258024ae1f824.mp3';
au.autoplay = flag;
au.loop = true;
prg.appendChild(au);
prg.onclick = function(){
flag ? (au.pause(),this.value = '20',flag = false) : (au.play(),this.removeAttribute('value'),flag = true);
}
</script>

复制代码

注意看HTML部分的代码，我们没有给progress设置 value 数值，这叫进度条的“不确定状态”，此状态下，进度条的进度指示颜色条会左右来回游走，我们就利用这一点假装音乐正在播放中。然后我们利用JS编写进度条的点击事件，暂停播放音乐时进度条停留在 20% 的进度上，继续播放音乐时移走进度条的 value 值，让进度指示色块又左右来回游动。

效果看二楼——

马黑黑 · 发表于 2022-5-5 22:49

马黑黑 · 发表于 2022-5-5 22:53

这里再给一个 progress 进度条的“正用”例子，它能演示audio的播放进度，请在本地或另外开帖测试代码：

<progress id="prg" max="100" value="0"></progress>
<script>
let prg = document.querySelector('#prg');
let au = document.createElement('audio');
let flag = true;
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/25/8c3b41f569aaeb660ac3dfd07cb1ef96.mp3';
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
prg.appendChild(au);
au.addEventListener('timeupdate',function(){
let prog = Math.round(au.currentTime * 100 / au.duration);
prg.value = prog;
}, false);
</script>