现在应该可以了吧
好了，可以了{:4_199:} 本帖最后由 加林森 于 2022-8-29 21:35 编辑 <br /><br />小辣椒 发表于 2022-6-6 13:47
好了，可以了
嗯嗯。
<style>
#papa { left: -20px; width: 800px; height: 600px; background: tan url('https://pic.imgdb.cn/item/630cba4216f2c2beb15820d0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 470px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 91px; border-radius: 50%; background: #20B2AA; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 525px; font: bold 1.4em sans-serif; color: #2E8B57; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>
<div id="papa">
<span id="conicPlayer" data-per="00:00
00:00"></span>
<span id="lrctext">lrc歌词</span>
</div>
<script>
let lrcAr = [
['00.00', '雨湘蓝'],
['260.00','谢谢欣赏']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1327082254.mp3';
aud.autoplay = true;
aud.loop = true;
conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
let current = aud.currentTime / aud.duration * 100;
conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
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;
}
</script>
这个播放器设计的位芝挺好的。 这个构思很有创意，那个按钮放得真好{:4_187:} 梦油 发表于 2022-6-6 15:22
这个播放器设计的位芝挺好的。
是的，两只手指就可以夹住了。 红影 发表于 2022-6-6 16:13
这个构思很有创意，那个按钮放得真好
是的，用两只手指就夹在手上了。{:4_189:} 加林森 发表于 2022-6-6 16:13
是的，两只手指就可以夹住了。
设计的很巧妙。 梦油 发表于 2022-6-6 16:27
设计的很巧妙。
嗯嗯，好看吧。 加林森 发表于 2022-6-6 13:25
对头。
那就多玩玩 加林森 发表于 2022-6-6 16:29
嗯嗯，好看吧。
很好，很好。 梦油 发表于 2022-6-6 18:06
很好，很好。
那就好。 马黑黑 发表于 2022-6-6 17:53
那就多玩玩
好的好的。 醉美水芙蓉 发表于 2022-6-6 17:57
队长厉害，很有创意！
好玩而已。 加林森 发表于 2022-6-6 16:16
是的，用两只手指就夹在手上了。
这个构思很巧。 红影 发表于 2022-6-6 21:47
这个构思很巧。
是的，好玩就行。
页:
1
[2]