@小辣椒 这个，按钮归拢在了一起，不易漂移：
<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: lightblue; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; right: 20px; top: 20px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; }
#h5player { width: 100px; height: 100px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 15px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 20px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left: 40px; font: normal 16px sans-serif; color: #eee; }
#lrctext { position: absolute; right: 140px; top: 50px; font: bold 1.5em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span>
<span id="btnplay"></span>
<span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">lrc歌词</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [ ['0.00','耶利亚女郎 - 歌词省略'],['240.00','谢谢支持'] ]
aud.src = 'https://music.163.com/song/media/outer/url?id=150852.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
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;
}
</script>
马黑黑 发表于 2022-8-29 22:03
不同环境，尺寸会有变化。我再封装一个不会移出的，你等一下下
好的，谢谢黑黑
小辣椒 发表于 2022-8-29 22:10
好的，谢谢黑黑
看21楼
马黑黑 发表于 2022-8-29 22:12
看21楼
不佩服都不行，黑黑你纯是个黑客{:4_170:}
但我得明天完成作业，最近来不及做作业
小辣椒 发表于 2022-8-29 22:18
不佩服都不行，黑黑你纯是个黑客
那不是归拢一下下，容易的。前面是把重点放在了 atan2 函数上了，没有关心CSS问题。
马黑黑 发表于 2022-8-29 22:19
那不是归拢一下下，容易的。前面是把重点放在了 atan2 函数上了，没有关心CSS问题。
不管怎么样反正你秒做好了{:4_189:}
小辣椒 发表于 2022-8-29 22:20
不管怎么样反正你秒做好了
归拢一下容易的
小辣椒 发表于 2022-8-29 22:19
但我得明天完成作业，最近来不及做作业
没事，慢慢来，最好能消化代码
马黑黑 发表于 2022-8-29 22:20
没事，慢慢来，最好能消化代码
好的，我回帖的时间都没有{:4_201:}
小辣椒 发表于 2022-8-29 22:21
好的，我回帖的时间都没有
不用急的
呼叫队长，看看黑黑21楼的代码不用修改小圆里面的颜色@加林森
小辣椒 发表于 2022-8-29 22:54
呼叫队长，看看黑黑21楼的代码不用修改小圆里面的颜色@加林森
来了来了。谢谢啦。
马黑黑 发表于 2022-8-29 21:53
而且还不复杂，就是知识点要点烧脑，多数人会觉得很难理解
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
这句是什么意思？
马黑黑 发表于 2022-8-29 21:54
个个都懒哈
哈哈，有道理{:4_173:}
红影 发表于 2022-8-30 15:56
哈哈，有道理
没道理我不说的
红影 发表于 2022-8-30 15:55
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
这句是什么意思？
deg 是角度，一般变量命名应该用 angle 或 a，CSS里用 deg 表示角度，所以我用它取代 a 或 angle 变量名称。
整句语句，检测鼠标指针，xy坐标值都小于 50 时，说明它处于第二象限，即左上角1/4区域，根据算法，要用 450 度与 atan2 获得的角度进行加法运算才是我所需要的从正上方算起的角度；其他区域，即其他的象限，都与 90 度进行加法运算即可。
我的预设，进度从正上方开始，所以有这样的算式。
马黑黑 发表于 2022-8-30 18:47
没道理我不说的
那我就懒着了{:4_173:}
马黑黑 发表于 2022-8-30 18:53
deg 是角度，一般变量命名应该用 angle 或 a，CSS里用 deg 表示角度，所以我用它取代 a 或 angle 变量名 ...
哦，知道了，前面没仔细想450度是什么，现在知道了，实际是一个圆周的360加上90，圆周的360多加多少个其实都没影响的，这是为了防止90不够减吧。也就是用810和450也是一样的吧。
红影 发表于 2022-8-30 19:20
哦，知道了，前面没仔细想450度是什么，现在知道了，实际是一个圆周的360加上90，圆周的360多加多少个其 ...
你理解的不准确。
这里还是与圆周有关。圆的X坐标向右指向0度，我要倒退90度才能让起始点从正上方开始。