图片按钮播放控制器

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv { margin: 30px auto; width: 600px; height: 300px; background: radial-gradient(tan,olive); position: relative; }
   
3. #prog {
   
4.         position: absolute;
   
5.         bottom: 10px;
   
6.         left: calc(50% - 150px);
   
7.         width: 300px;
   
8.         height: 8px;
   
9.         border: 1px solid lightblue;
   
10.         border-radius: 10px;
    
11.         background: linear-gradient(to right, green, red var(--prg), white 0);
    
12.         color: lightgreen;
    
13.         --prg: 0%; --state: paused;
    
14. }
    
15. #prog::before, #prog::after { position: absolute; top: -30px; }
    
16. #prog::before { content: attr(data-cu); }
    
17. #prog::after { right: 0; content: attr(data-du); }
    
18. #btnplay {
    
19.         position: absolute;
    
20.         top: -42px;
    
21.         left: calc(50% - 17.5px);
    
22.         width: 35px;
    
23.         height: 35px;
    
24.         background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;
    
25.         cursor: pointer;
    
26.         animation: rot 6s infinite linear var(--state);
    
27. }
    
28. @keyframes rot { to { transform: rotate(1turn); } }
    
29. </style>
    
30. 
    
31. <div id="mydiv">
    
32. <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度"><span id="btnplay" title="播放/暂停"></span></div>
    
33. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051744489" autoplay loop></audio>
    
34. </div>
    
35. 
    
36. <script>
    
37. let toMin = (val)  => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
    
38. let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
39. aud.addEventListener('pause', mState, false);
    
40. aud.addEventListener('play', mState, false);
    
41. aud.addEventListener('timeupdate', () => {
    
42.         prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
    
43.         prog.dataset.cu = toMin(aud.currentTime);
    
44.         prog.dataset.du = toMin(aud.duration);
    
45. });
    
46. btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    
47. prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
    
48. </script>

复制代码

马黑黑

图片：24行

     background: url('https://638183.freep.cn/638183/t23/btn/flowers-01(1).png') no-repeat -110px -8px;

图片最好背景透明。如果是单图，红色部分代码改为：

    center / cover

马黑黑

按钮单击事件，46行：

    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }

为什么有红色这一句、它是干嘛用的？

因为，id="btnplay" 的 span 标签是 prog 的子元素，单击子元素，单击事件会冒泡到父元素（乃至冒泡到更大辈分的祖父元素），而父元素有自己的单击事件（播放进度调节），故此需要阻止冒泡事件的发生，e.stopPropagation() 就是起这个作用，只允许自身的单击事件有效。

焱鑫磊

学习！赞！

马黑黑

醉美水芙蓉 发表于 2023-7-23 06:45
欣赏学习老师新课程！

这个样式的，我们之前有过，这里是实现方式有所不同

马黑黑

焱鑫磊 发表于 2023-7-23 08:15
学习！赞！

之前做过这个样式的，这里改写一下

一斛珠

来欣赏黑黑老师作品

马黑黑

一斛珠 发表于 2023-7-23 11:23
来欣赏黑黑老师作品

请用咖啡

红影

这个帖子竟然漏看了

红影

马黑黑 发表于 2023-7-22 23:25
按钮单击事件，46行：

    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play()  ...

这个讲解是新内容

马黑黑

红影 发表于 2023-7-28 09:25
这个帖子竟然漏看了

也好

马黑黑

红影 发表于 2023-7-28 09:28
这个讲解是新内容

半新半旧

红影

马黑黑 发表于 2023-7-28 12:22
也好

有时帖子超出首页，真的可能漏掉，即使去翻看过。上次就漏了一斛珠的帖子

红影

马黑黑 发表于 2023-7-28 12:22
半新半旧

我是说这个 (e) => { e.stopPropagation();……从来没注意过

马黑黑

红影 发表于 2023-7-28 13:11
我是说这个 (e) => { e.stopPropagation();……从来没注意过

这个是新的

马黑黑

红影 发表于 2023-7-28 13:10
有时帖子超出首页，真的可能漏掉，即使去翻看过。上次就漏了一斛珠的帖子

正常的

红影

马黑黑 发表于 2023-7-28 13:41
这个是新的

还好看到这个帖子，也补上了这一课

红影

马黑黑 发表于 2023-7-28 13:43
正常的

所以有时有事外出了，回来我都翻半天新帖。