论坛 › 欢乐水吧 › 『帖赠千羽』羽

马黑黑 发表于 2023-3-14 07:55

『帖赠千羽』羽

<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp/138.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: 51%; top: 40%; 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=1817109136" 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 08:14

帖子代码
<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp/138.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: 51%; top: 40%; 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=1817109136" 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 08:15

相关说明请参阅：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=67290&extra=page%3D1

红影 发表于 2023-3-14 09:46

一直听着音乐，看着上面那根跟指针一点点走着。有趣。
黑氏时钟播放器的具体应用{:4_199:}

马黑黑 发表于 2023-3-14 11:57

红影 发表于 2023-3-14 09:46
一直听着音乐，看着上面那根跟指针一点点走着。有趣。
黑氏时钟播放器的具体应用

走玩一圈，音乐播完

马黑黑 发表于 2023-3-14 12:00

红影 发表于 2023-3-14 09:46
一直听着音乐，看着上面那根跟指针一点点走着。有趣。
黑氏时钟播放器的具体应用

黑氏那里，播放器已经是成品了

樵歌 发表于 2023-3-14 12:36

又送一件精品小礼物给千羽小盆友{:4_189:}

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

樵歌 发表于 2023-3-14 12:36
又送一件精品小礼物给千羽小盆友

喝水{:4_190:}

红影 发表于 2023-3-14 16:16

马黑黑 发表于 2023-3-14 11:57
走玩一圈，音乐播完

是的，这个是按音乐时长算好的吧。

红影 发表于 2023-3-14 16:17

马黑黑 发表于 2023-3-14 12:00
黑氏那里，播放器已经是成品了

但是那个是技术讲解，这个是具体应用啊。

马黑黑 发表于 2023-3-14 17:35

红影 发表于 2023-3-14 16:17
但是那个是技术讲解，这个是具体应用啊。

差不多的

马黑黑 发表于 2023-3-14 17:35

红影 发表于 2023-3-14 16:16
是的，这个是按音乐时长算好的吧。

那必须的

雨中悄然 发表于 2023-3-14 17:58

漂 亮，正想谢谢千羽，就跟套用了一个{:4_187:}

马黑黑 发表于 2023-3-14 18:04

雨中悄然 发表于 2023-3-14 17:58
漂 亮，正想谢谢千羽，就跟套用了一个

{:5_108:}

雨中悄然 发表于 2023-3-14 18:05

马黑黑 发表于 2023-3-14 18:04


{:4_170:}好用啊，及时的很。这个我网站里发不出来？

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

雨中悄然 发表于 2023-3-14 18:05
好用啊，及时的很。这个我网站里发不出来？

不会吧？你去看看我的网站

雨中悄然 发表于 2023-3-14 18:07

马黑黑 发表于 2023-3-14 18:05
不会吧？你去看看我的网站

难道我又少了分号{:4_170:}

雨中悄然 发表于 2023-3-14 18:07

我去试试看下

雨中悄然 发表于 2023-3-14 18:09

马黑黑 发表于 2023-3-14 18:05
不会吧？你去看看我的网站

麻烦你帮我瞧瞧，真不出来。{:4_170:}到我这儿就不灵了

雨中悄然 发表于 2023-3-14 18:22

已解决{:4_173:}

查看完整版本: 『帖赠千羽』羽