还是那球，不是那球

马黑黑

马黑黑

代码分享：

1. <style>
   
2. .progress {
   
3.         display: flex;
   
4.         justify-content: center;
   
5.         align-items: center;
   
6.         width: 100px;
   
7.         height: 100px;
   
8.         border-radius: 50%;
   
9.         background: conic-gradient(from 180deg,red 0%,seagreen 0%);
   
10.         cursor: pointer;
    
11.         position: relative;
    
12. }
    
13. .progress::before {
    
14.         position: absolute;
    
15.         content: attr(data-per);
    
16.         width: 90px;
    
17.         height: 90px;
    
18.         border-radius: 50%;
    
19.         background: lightseagreen;
    
20.         text-align: center;
    
21.         font: normal 15px / 90px sans-serif;
    
22. }
    
23. </style>
    
24. 
    
25. <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/17/cb27258225441e3bcd54fbfadad3a952.mp3" loop="loop" autoplay="autoplay"></audio>
    
26. <div class="progress" data-per="0%"></div>
    
27. 
    
28. <script>
    
29. let progress = document.querySelector('.progress');
    
30. let aud = document.querySelector('#aud');
    
31. let current, task;
    
32. 
    
33. aud.addEventListener('timeupdate', function(){
    
34.         task = aud.duration;
    
35.         current = aud.currentTime;
    
36.         setProgress(task,current);
    
37. });
    
38. 
    
39. progress.onclick = () =>{
    
40.         aud.paused ? aud.play() : aud.pause();
    
41. };
    
42. 
    
43. function setProgress(tt,cc) {
    
44.         if(tt <= 0 || cc <= 0) return false;
    
45.         let prog = 100 * cc / tt;
    
46.         progress.style.background = `conic-gradient(from 180deg,red ${prog}%,seagreen ${prog}%)`;
    
47.         progress.setAttribute('data-per', prog.toFixed(2) + '%');
    
48. }
    
49. </script>

复制代码

小辣椒

沙发先坐上

小辣椒

这个是音乐速度标记？

马黑黑

小辣椒 发表于 2022-5-19 20:36
这个是音乐速度标记？

看看就知道

小辣椒

马黑黑 发表于 2022-5-19 20:40
看看就知道

黑黑 发现怪现象，我开始这个圆音标没有动，我刷新也是一样，后面我关了其他音乐，刷新音标转动出来了

马黑黑

醉美水芙蓉 发表于 2022-5-19 20:47
有点像测试音乐的速度仪！

它是一个控制器，可以暂停、播放音乐

马黑黑

小辣椒 发表于 2022-5-19 20:43
黑黑 发现怪现象，我开始这个圆音标没有动，我刷新也是一样，后面我关了其他音乐，刷新音标转动出来了

audio机制有冲突，这很正常，毕竟audio就是一个控件，如果大家使用的某些设定又是一样的，就有你所说的现象发生

马黑黑

醉美水芙蓉 发表于 2022-5-19 20:48
很神奇，点击一下音乐就停了！

我们这里称之为按钮

小辣椒

马黑黑 发表于 2022-5-19 20:49
audio机制有冲突，这很正常，毕竟audio就是一个控件，如果大家使用的某些设定又是一样的，就有你所说的现 ...

涨知识了

马黑黑

小辣椒 发表于 2022-5-19 20:50
涨知识了

每一个控件可能都需要进程，当都是独立进程时，是不会相互干扰的，否则会干扰

小辣椒

马黑黑 发表于 2022-5-19 20:51
每一个控件可能都需要进程，当都是独立进程时，是不会相互干扰的，否则会干扰

所以 有时候一个音乐开着，再打开其他的音乐有可能会冲突了。。。这个情况以后我就会明白道理了，不会刷新再刷新的

加林森

好漂亮的制作。为你点赞！

马黑黑

加林森 发表于 2022-5-19 20:58
好漂亮的制作。为你点赞！

漂亮谈不上，功能不错

马黑黑

小辣椒 发表于 2022-5-19 20:57
所以 有时候一个音乐开着，再打开其他的音乐有可能会冲突了。。。这个情况以后我就会明白道理了，不会刷 ...

但不一定都这样，碰上的几率也不高

小辣椒

马黑黑 发表于 2022-5-19 21:29
但不一定都这样，碰上的几率也不高

如果碰到这个问题就可以自己给自己解释原因了

马黑黑

小辣椒 发表于 2022-5-19 21:31
如果碰到这个问题就可以自己给自己解释原因了

嗯嗯

加林森

马黑黑 发表于 2022-5-19 21:28
漂亮谈不上，功能不错

我刚才外面，用手机回的，现在我上电脑了。看见这个功能真的很喜欢。谢谢老黑！