audio播放器控制按钮：简单的时钟样式
本帖最后由 马黑黑 于 2022-3-16 09:53 编辑 <br /><br /><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: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>
代码分三部分：
一、CSS
<style>
...
</style>
二、HTML部分
div是模拟时钟，audio是播放器，两样元素按原样放一起，id不要更改
三、JS部分
<script ...>
....
</script>
JS代码放在帖子的最后，不要缺漏 </script> 收尾符！ 纯代码时钟，而且跟音乐关联。真棒{:4_199:} 咋不做点刻度在上面，不就更像了{:4_173:} 这音乐倒是好听，不知叫什么名字。 红影 发表于 2022-3-16 11:22
这音乐倒是好听，不知叫什么名字。
小九帖子里的音乐 红影 发表于 2022-3-16 11:12
纯代码时钟，而且跟音乐关联。真棒
昨天不是摆弄一下小九的帖子么？你弄的大猫咪不太理想，我就想做个时钟按钮代替它 红影 发表于 2022-3-16 11:12
咋不做点刻度在上面，不就更像了
小概念手表都不要刻度了，甚至不要指针呢 老黑又出新的教程了，真漂亮。这下又有学的了。{:4_199:} 加林森 发表于 2022-3-16 11:46
老黑又出新的教程了，真漂亮。这下又有学的了。
这个是之前的播放器按钮的延续，换个样式而已 马黑黑 发表于 2022-3-16 11:48
这个是之前的播放器按钮的延续，换个样式而已
挺漂亮的。 加林森 发表于 2022-3-16 11:48
挺漂亮的。
喜欢就好 马黑黑 发表于 2022-3-16 11:49
喜欢就好
我也跟着去试一下。 加林森 发表于 2022-3-16 12:08
我也跟着去试一下。
期待中 马黑黑 发表于 2022-3-16 12:30
期待中
制作出来了 加林森 发表于 2022-3-16 12:41
制作出来了
看到了，很腻害 马黑黑 发表于 2022-3-16 12:53
看到了，很腻害
你教得好。{:4_190:} 马黑黑 发表于 2022-3-16 11:29
小九帖子里的音乐
哦哦，这样啊。