论坛 › 马黑黑教程专版 › 黑氏时钟播改进版关联音乐

马黑黑 发表于 2023-3-16 20:05

黑氏时钟播改进版关联音乐

<style>
#clock {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background: lightgreen;
        box-shadow: 0 0 40px black inset, 0 0 60px snow inset;
        filter: drop-shadow(0 0 20px #000);
        border-radius: 50%;
        border: 8px solid black;
        display: grid;
        place-items: center;
        position: relative;
        cursor: pointer;
        opacity: .8;
        --state: paused;
}
#clock::before, #clock::after {
        position: absolute;
        content: '';
        width: 6px;
        height: 98px;
}
#clock::after {
        --deg: 360deg;
        bottom: 50%;
        background: green;
        opacity: .75;
        transform-origin: 50% 100%;
        animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
        --deg: 15deg;
        top: 50%;
        background: black;
        transform: rotate(-15deg);
        transform-origin: 50% 0;
        animation: rot .5s infinite alternate linear var(--state);
}
#clock > span {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: black;
        z-index: 2;
}
#clock > span:nth-of-type(2) {
        top: -7px;
        width: 6px;
        height: 6px;
        background: lightgreen;
}
@keyframes rot {
        to {transform: rotate(var(--deg)); }
}
</style>

<div id="clock">00:00 &nbsp; &nbsp; 00:00<span></span><span></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5237700" loop autoplay></audio>

<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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + ' &nbsp; &nbsp; ' +toMin(aud.duration) + '<span></span><span></span>');

</script>

马黑黑 发表于 2023-3-16 20:06

代码
<style>
#clock {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background: lightgreen;
        box-shadow: 0 0 40px black inset, 0 0 60px snow inset;
        filter: drop-shadow(0 0 20px #000);
        border-radius: 50%;
        border: 8px solid black;
        display: grid;
        place-items: center;
        position: relative;
        cursor: pointer;
        opacity: .8;
        --state: paused;
}
#clock::before, #clock::after {
        position: absolute;
        content: '';
        width: 6px;
        height: 98px;
}
#clock::after {
        --deg: 360deg;
        bottom: 50%;
        background: green;
        opacity: .75;
        transform-origin: 50% 100%;
        animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
        --deg: 15deg;
        top: 50%;
        background: black;
        transform: rotate(-15deg);
        transform-origin: 50% 0;
        animation: rot .5s infinite alternate linear var(--state);
}
#clock > span {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: black;
        z-index: 2;
}
#clock > span:nth-of-type(2) {
        top: -7px;
        width: 6px;
        height: 6px;
        background: lightgreen;
}
@keyframes rot {
        to {transform: rotate(var(--deg)); }
}
</style>

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

<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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + '   ' +toMin(aud.duration) + '<span></span><span></span>');

</script>

马黑黑 发表于 2023-3-16 20:26

很容易会发现，音频播放进度指针的运行是平滑的。这是使用关键帧动画实现进度指示的缘故，和之前的相比，不再是监听audio的timeupdate事件完成进度指示——timeupdate基本以秒为频率单位，进度指示的运行因此不太可能平滑。

且，本次改进，节拍器和进度指示的指针共享同一个CSS关键帧动画，通过CSS变量，必要之处结合JS，静态或动态传达变量值，达成整体动态效果。

时钟仍然是单元素构成，但加入了两个子元素 span 作为附件，用于修饰时钟：其一是播放进度的起点（也是终点），其二是两个指针的根。

红影 发表于 2023-3-16 20:31

和音乐关联了，又可以做帖子的播放器了{:4_187:}

马黑黑 发表于 2023-3-16 20:32

红影 发表于 2023-3-16 20:31
和音乐关联了，又可以做帖子的播放器了

谢花堆

樵歌 发表于 2023-3-16 21:07

反正俺也不懂，豆知道对做帖子有大用。

马黑黑 发表于 2023-3-16 21:08

樵歌 发表于 2023-3-16 21:07
反正俺也不懂，豆知道对做帖子有大用。

小用小用

红影 发表于 2023-3-16 21:19

马黑黑 发表于 2023-3-16 20:32
谢花堆

仿佛已经看到它被用在帖子里的样子了{:4_173:}

马黑黑 发表于 2023-3-16 21:25

红影 发表于 2023-3-16 21:19
仿佛已经看到它被用在帖子里的样子了

这么神奇

红影 发表于 2023-3-16 22:00

马黑黑 发表于 2023-3-16 21:25
这么神奇

因为这个帖子的边框就像墙壁一样啊。

马黑黑 发表于 2023-3-16 22:08

红影 发表于 2023-3-16 22:00
因为这个帖子的边框就像墙壁一样啊。

墙壁？

庶民 发表于 2023-3-17 05:04

感觉真的神奇，点赞。

马黑黑 发表于 2023-3-17 07:27

庶民 发表于 2023-3-17 05:04
感觉真的神奇，点赞。

早

红影 发表于 2023-3-17 10:03

马黑黑 发表于 2023-3-16 22:08
墙壁？

对呀，闹钟不是挂在墙壁上的么{:4_173:}

樵歌 发表于 2023-3-17 10:48

马黑黑 发表于 2023-3-16 21:08
小用小用

谦虚

马黑黑 发表于 2023-3-17 11:54

樵歌 发表于 2023-3-17 10:48
谦虚

应该应该

马黑黑 发表于 2023-3-17 11:59

红影 发表于 2023-3-17 10:03
对呀，闹钟不是挂在墙壁上的么

那可不一定，比如可以放在床头

红影 发表于 2023-3-17 20:44

马黑黑 发表于 2023-3-17 11:59
那可不一定，比如可以放在床头

那就不是挂钟，是座钟{:4_173:}

樵歌 发表于 2023-3-17 21:28

马黑黑 发表于 2023-3-17 11:54
应该应该

美德少年{:4_173:}

马黑黑 发表于 2023-3-17 21:37

樵歌 发表于 2023-3-17 21:28
美德少年

{:4_170:}

查看完整版本: 黑氏时钟播改进版关联音乐