『帖赠千羽』羽

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

00:00

马黑黑 · 发表于 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>