还是那球，不是那球
本帖最后由 马黑黑 于 2022-5-19 20:32 编辑 <br /><br /><style>.progress {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
left: 7%;
top: 50%;
border-radius: 50%;
background: conic-gradient(from 180deg,red 0%,seagreen 0%);
cursor: pointer;
position: relative;
}
.progress::before {
position: absolute;
content: attr(data-per);
width: 90px;
height: 90px;
border-radius: 50%;
background: lightseagreen;
text-align: center;
font: normal 15px / 90px sans-serif;
}
</style>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/17/cb27258225441e3bcd54fbfadad3a952.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
<div class="progress" data-per="0%"></div>
<script>
let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
progress.onclick = () =>{
aud.paused ? aud.play() : aud.pause();
};
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
progress.style.background = `conic-gradient(from 180deg,red ${prog}%,seagreen ${prog}%)`;
progress.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
本帖最后由 马黑黑 于 2022-5-19 20:34 编辑
代码分享：
<style>
.progress {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(from 180deg,red 0%,seagreen 0%);
cursor: pointer;
position: relative;
}
.progress::before {
position: absolute;
content: attr(data-per);
width: 90px;
height: 90px;
border-radius: 50%;
background: lightseagreen;
text-align: center;
font: normal 15px / 90px sans-serif;
}
</style>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/17/cb27258225441e3bcd54fbfadad3a952.mp3" loop="loop" autoplay="autoplay"></audio>
<div class="progress" data-per="0%"></div>
<script>
let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
progress.onclick = () =>{
aud.paused ? aud.play() : aud.pause();
};
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
progress.style.background = `conic-gradient(from 180deg,red ${prog}%,seagreen ${prog}%)`;
progress.setAttribute('data-per', prog.toFixed(2) + '%');
}
</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就是一个控件，如果大家使用的某些设定又是一样的，就有你所说的现 ...
涨知识了{:4_173:} 小辣椒 发表于 2022-5-19 20:50
涨知识了
每一个控件可能都需要进程，当都是独立进程时，是不会相互干扰的，否则会干扰 马黑黑 发表于 2022-5-19 20:51
每一个控件可能都需要进程，当都是独立进程时，是不会相互干扰的，否则会干扰
所以 有时候一个音乐开着，再打开其他的音乐有可能会冲突了。。。这个情况以后我就会明白道理了，不会刷新再刷新的 好漂亮的制作。为你点赞！{:4_199:} 加林森 发表于 2022-5-19 20:58
好漂亮的制作。为你点赞！
漂亮谈不上，功能不错 小辣椒 发表于 2022-5-19 20:57
所以 有时候一个音乐开着，再打开其他的音乐有可能会冲突了。。。这个情况以后我就会明白道理了，不会刷 ...
但不一定都这样，碰上的几率也不高 马黑黑 发表于 2022-5-19 21:29
但不一定都这样，碰上的几率也不高
如果碰到这个问题就可以自己给自己解释原因了{:4_173:} 小辣椒 发表于 2022-5-19 21:31
如果碰到这个问题就可以自己给自己解释原因了
嗯嗯{:4_181:} 马黑黑 发表于 2022-5-19 21:28
漂亮谈不上，功能不错
我刚才外面，用手机回的，现在我上电脑了。看见这个功能真的很喜欢。谢谢老黑！{:4_190:}
页:
[1]
2