论坛 › 马黑黑教程专版 › 黑氏时钟播放器

马黑黑 发表于 2023-3-13 21:33

黑氏时钟播放器

<style>
#clock {
        --ww: 120px; --state: paused; --deg: 0; --deg: 0s;
        position: relative;
        width: var(--ww);
        height: var(--ww);
        color: #eee;
        text-shadow: 1px 1px 2px #000;
        border: 6px solid #333;
        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(0,90%,40%,.65);
        bottom: 50%;
        transform-origin: 50% 100%;
        transform: rotate(var(--deg));
}
#clock::after {
        top: 50%;
        background: hsla(0,0%,0%,.75);
        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="clock">00:00</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=106017" autoplay loop></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;};
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-13 21:34

代码：
<style>
#clock {
        --ww: 120px; --state: paused; --deg: 0; --deg: 0s;
        position: relative;
        width: var(--ww);
        height: var(--ww);
        color: #eee;
        text-shadow: 1px 1px 2px #000;
        border: 6px solid #333;
        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(0,90%,40%,.65);
        bottom: 50%;
        transform-origin: 50% 100%;
        transform: rotate(var(--deg));
}
#clock::after {
        top: 50%;
        background: hsla(0,0%,0%,.75);
        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="clock">00:00</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=106017" autoplay loop></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;};
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-13 21:38

醉美水芙蓉 发表于 2023-3-13 21:38

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

单元素时钟播放器：时钟外壳是主元素，进度指针是 ::before 伪元素，节拍指针是 ::after 伪元素。

节拍指针通过 swing 关键帧动画实现；进度指针、文本进度通过监听 audio 的 timeupdate 时间驱动。

貌似不复杂哈

马黑黑 发表于 2023-3-13 21:40

醉美水芙蓉 发表于 2023-3-13 21:38
黑黑老师速度好快！这么快一个播放器就出来了！

做过系列时钟，这个做起来不难

马黑黑 发表于 2023-3-13 21:40

醉美水芙蓉 发表于 2023-3-13 21:38
播放器简单好听！

歌曲不错

红影 发表于 2023-3-13 22:30

下面的指针在摆动，上面的指针在走动。漂亮{:4_187:}

马黑黑 发表于 2023-3-13 22:49

红影 发表于 2023-3-13 22:30
下面的指针在摆动，上面的指针在走动。漂亮

{:4_191:}

小辣椒 发表于 2023-3-13 23:01

黑黑，这时钟是准备后面做时钟播放器吧，这个刻度没有的，上次那时钟有刻度但不是播放器，又进一步改进了

小辣椒 发表于 2023-3-13 23:01

音乐特别的抒情，好听{:4_208:}

马黑黑 发表于 2023-3-13 23:25

小辣椒 发表于 2023-3-13 23:01
黑黑，这时钟是准备后面做时钟播放器吧，这个刻度没有的，上次那时钟有刻度但不是播放器，又进一步改进了

刻度不是必须的{:5_106:}

马黑黑 发表于 2023-3-13 23:26

小辣椒 发表于 2023-3-13 23:01
音乐特别的抒情，好听

不错的

庶民 发表于 2023-3-14 04:48

给我耳目一新的感觉，学习了！

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

庶民 发表于 2023-3-14 04:48
给我耳目一新的感觉，学习了！

感谢支持

樵歌 发表于 2023-3-14 07:38

双开始赠送小牛牛们小礼物了{:4_189:}

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

樵歌 发表于 2023-3-14 07:38
双开始赠送小牛牛们小礼物了

早

樵歌 发表于 2023-3-14 07:43

马黑黑 发表于 2023-3-14 07:39
早

都早{:4_190:}

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

樵歌 发表于 2023-3-14 07:43
都早

我七点半才起来，不早

梦油 发表于 2023-3-14 10:56

这两个指针度在动啊

查看完整版本: 黑氏时钟播放器