audio播放器控制按钮：简单的时钟样式

马黑黑 · 发表于 2022-3-16 09:35

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

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

x

本帖最后由马黑黑于 2022-3-16 09:53 编辑

马黑黑 · 发表于 2022-3-16 09:37

不过运动圆心的计算似乎有点小问题，我再微调一下下看看能不能更好

马黑黑 · 发表于 2022-3-16 09:48

本帖最后由马黑黑于 2022-3-16 09:54 编辑

代码分享：

<style>
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2); width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg); } }
</style>

<div id="clkBtn">
<div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=488664116.mp3" ></audio>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

马黑黑 · 发表于 2022-3-16 09:52

代码分三部分：

一、CSS
<style>
...
</style>

二、HTML部分

div是模拟时钟，audio是播放器，两样元素按原样放一起，id不要更改

三、JS部分

<script ...>
....
</script>

JS代码放在帖子的最后，不要缺漏 </script> 收尾符！