千羽 发表于 2023-3-14 21:37

【学习黑黑老师播放器代码】《月夜》

本帖最后由 千羽 于 2023-3-14 21:45 编辑 <br /><br />
<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://pic.imgdb.cn/item/64107022ebf10e5d53700276.jpg.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#clock { --ww: 120px; --state: paused; --deg: 0; --deg: 0s; position: absolute; left: 46%; top: 70%; width: var(--ww); height: var(--ww); color: tan; text-shadow: 1px 1px 2px #000; border: 6px solid lightblue; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
#clock::before, #clock::after { position: absolute; content: ''; width: 6px; height: calc(var(--ww) / 2 - 2px); border-radius: 50%; }
#clock::before { background: hsla(240,80%,90%,.75); bottom: 50%; transform-origin: 50% 100%; transform: rotate(var(--deg)); }
#clock::after { top: 50%; background: hsla(240,100%,50%,.5); transform-origin: 100% 0; animation: swing .3s infinite alternate linear var(--state); }
@keyframes swing { from { transform: rotate(15deg); } to {transform: rotate(-15deg); } }
</style>

<div id="papa">
      <div id="clock">00:00</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29807450" autoplay loop></audio>
</div>

<script>
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;};
let mState = () => clock.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('timeupdate', () => {
      let deg = 360*aud.currentTime / aud.duration;
      clock.style.setProperty('--deg', deg +'deg');
      clock.innerText = toMin(aud.currentTime) + ' - ' +toMin(aud.duration);
});
</script>

千羽 发表于 2023-3-14 21:39

自己都不满意，水平就这样了{:4_201:}

马黑黑 发表于 2023-3-14 21:39

钟小了文字一行放不下

千羽 发表于 2023-3-14 21:40

马黑黑 发表于 2023-3-14 21:39
钟小了文字一行放不下

是，{:4_173:}

马黑黑 发表于 2023-3-14 21:44

千羽 发表于 2023-3-14 21:40
是，

可以改文本大小，也可以设置钟大一点，或二者都考虑

千羽 发表于 2023-3-14 21:46

马黑黑 发表于 2023-3-14 21:44
可以改文本大小，也可以设置钟大一点，或二者都考虑

俺还原了{:4_181:}

千羽 发表于 2023-3-14 21:47

马黑黑 发表于 2023-3-14 21:44
可以改文本大小，也可以设置钟大一点，或二者都考虑

俺哪有那本事啊{:4_201:}

马黑黑 发表于 2023-3-14 22:05

千羽 发表于 2023-3-14 21:47
俺哪有那本事啊

慢慢来不急

马黑黑 发表于 2023-3-14 22:05

千羽 发表于 2023-3-14 21:46
俺还原了

改为100也是可以的

风中飞尘 发表于 2023-3-14 22:23

音乐好听

庶民 发表于 2023-3-15 06:48


好思维，有创意！
！

樵歌 发表于 2023-3-15 07:09

嗯，创意好，有个名角儿{:4_189:}

小辣椒 发表于 2023-3-15 11:54

千羽这个看上去很漂亮啊，这个教程刚才在黑黑板块看见，这里千羽已经做好了，我先去看看黑黑有没有发帖过

红影 发表于 2023-3-15 12:30

很清爽漂亮的制作，好看。羽儿真棒{:4_199:}
页: [1]
查看完整版本: 【学习黑黑老师播放器代码】《月夜》