论坛 › 马黑黑教程专版 › H5 progress标签异用

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

H5 progress标签异用

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

<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>

马黑黑 发表于 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>

红影 发表于 2022-5-5 23:17

真奇特，进度条的“不确定状态”可以自动给它里面指示小条的宽度？

红影 发表于 2022-5-5 23:18

马黑黑 发表于 2022-5-5 22:53
这里再给一个 progress 进度条的“正用”例子，它能演示audio的播放进度，请在本地或另外开帖测试代码：

...

试了，里面的指示条颜色也是蓝色的，指示条的颜色也是内置的吧。

马黑黑 发表于 2022-5-5 23:27

红影 发表于 2022-5-5 23:18
试了，里面的指示条颜色也是蓝色的，指示条的颜色也是内置的吧。

默认的样纸。目前，改变它还不容易呢

马黑黑 发表于 2022-5-5 23:28

红影 发表于 2022-5-5 23:17
真奇特，进度条的“不确定状态”可以自动给它里面指示小条的宽度？

默认的20%的宽度

红影 发表于 2022-5-6 09:45

马黑黑 发表于 2022-5-5 23:27
默认的样纸。目前，改变它还不容易呢

不过这个默认色也挺好看的。

红影 发表于 2022-5-6 09:55

马黑黑 发表于 2022-5-5 23:28
默认的20%的宽度

光注意代码了，发现这首歌也很好听呢{:4_204:}

马黑黑 发表于 2022-5-6 13:02

红影 发表于 2022-5-6 09:55
光注意代码了，发现这首歌也很好听呢

歌曲清新可爱

马黑黑 发表于 2022-5-6 13:03

红影 发表于 2022-5-6 09:45
不过这个默认色也挺好看的。

H5默认样式的元素可能就是这个比较能令人接收，有点小帅

红影 发表于 2022-5-6 22:21

马黑黑 发表于 2022-5-6 13:02
歌曲清新可爱

事呢，非常可爱的歌曲呢。

红影 发表于 2022-5-6 22:22

马黑黑 发表于 2022-5-6 13:03
H5默认样式的元素可能就是这个比较能令人接收，有点小帅

全都给配好了，倒也省力呢。

马黑黑 发表于 2022-5-6 22:26

红影 发表于 2022-5-6 22:22
全都给配好了，倒也省力呢。

也不是说配好，原始样式咋样就咋样，我们只评价它好不好看

马黑黑 发表于 2022-5-6 22:26

红影 发表于 2022-5-6 22:21
事呢，非常可爱的歌曲呢。

确实可以听听

红影 发表于 2022-5-7 12:22

马黑黑 发表于 2022-5-6 22:26
也不是说配好，原始样式咋样就咋样，我们只评价它好不好看

我觉得挺好看。

马黑黑 发表于 2022-5-7 12:40

红影 发表于 2022-5-7 12:22
我觉得挺好看。

audio播放器就不好看

加林森 发表于 2022-5-7 16:11

老黑的这个播放器真漂亮，蓝色的进度条，好看！这首歌曲是不是黑鸭子组合唱的啊？{:4_199:}

马黑黑 发表于 2022-5-7 18:08

加林森 发表于 2022-5-7 16:11
老黑的这个播放器真漂亮，蓝色的进度条，好看！这首歌曲是不是黑鸭子组合唱的啊？

不是黑鸭子。黑鸭子是成熟的，这个是稚嫩的小女生组合

加林森 发表于 2022-5-7 18:24

马黑黑 发表于 2022-5-7 18:08
不是黑鸭子。黑鸭子是成熟的，这个是稚嫩的小女生组合

哦，应该是少女组合吧。

查看完整版本: H5 progress标签异用