不是那球，还是那球

马黑黑 · 发表于 2022-5-20 07:42

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

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

x

本帖最后由马黑黑于 2022-5-20 07:45 编辑

马黑黑 · 发表于 2022-5-20 07:46

原创代码：

<style>
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: solid 10px transparent;
border-radius: 50%;
background-image: radial-gradient(ghostwhite, transparent), linear-gradient(to right, pink, green, red, gold);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
position: relative;
}
.circle::before {
position: absolute;
content: attr(data-per);
}
.hand {
position: absolute;
width: 6px;
height: 45px;
top: 6px;
border-radius: 50%;
background: rgba(200,20,20,.45);
transform-origin: bottom;
}
.hand::before {
position: absolute;
content: '';
width: 16px;
height: 16px;
left: -5px;
bottom: -8px;
border-radius: 50%;
background: rgba(0,0,0,.25);
}
</style>
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" controls="controls"></audio><br><br></p>
<div class="circle" data-per="0%">
<div class="hand"></div>
</div>
<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
hand.style.transform = `rotate(${360*prog/100}deg`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

复制代码

马黑黑 · 发表于 2022-5-20 07:48

需要自动+循环播放、不显示播放器界面的，下面这句，

<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" controls="controls"></audio><br><br></p>

改为，

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=276703.mp3" autoplay="autoplay" loop="loop"></audio>

马黑黑 · 发表于 2022-5-20 07:56

指针类仪表按钮的代码会多一些。原因：

一、HTML结构，不能使用单元素，因为使用单元素意味着要用伪元素，而JS对伪元素的操控能力十分有限（伪元素不属于DOM内元素，JS主要是对DOM操作）。

二、指针旋转360度要与进度的百分比建立关联，里面需要加入一个算法，虽然简单，但总会需要变量与计算代码。

马黑黑 · 发表于 2022-5-20 08:00

仪表的颜色请修改第十一行：

background-image: radial-gradient(ghostwhite, transparent), linear-gradient(to right, pink, green, red, gold);

第一组颜色，radial-gradient是仪表里面的背景渐变颜色，也可改用线性渐变；第二组颜色是边框渐变颜色，top right是方向，其他颜色可增可减，可删可改，自己满意就好